/*
|--------------------------------------------------------------------------
| SHENDY TECH
| PRODUCT DETAILS
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */

body.st-site {

    --std-dark: #021844;
    --std-blue: #062b66;

    --std-gold: #f8b400;
    --std-gold-light: #ffc93d;

    --std-text: #071d47;
    --std-muted: #6d7d92;

    --std-border:
        rgba(
            6,
            43,
            102,
            .08
        );
}


/* ==========================================================================
   HERO
   ========================================================================== */

body.st-site
.std-product-hero {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding-block:
        105px
        75px;

    color:
        var(--std-text);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faff 54%,
            #eef5ff 100%
        );

    isolation: isolate;
}


/* ==========================================================================
   HERO BACKGROUND
   ========================================================================== */

body.st-site
.std-product-grid-bg {

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(6,43,102,.028)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(6,43,102,.028)
            1px,
            transparent
            1px
        );

    background-size:
        55px
        55px;
}


/* ==========================================================================
   GLOWS
   ========================================================================== */

body.st-site
.std-product-glow {

    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(110px);
}


body.st-site
.std-product-glow-gold {

    width: 450px;
    height: 450px;

    inset-inline-start: -300px;
    inset-block-end: -150px;

    background:
        rgba(
            248,
            180,
            0,
            .09
        );
}


body.st-site
.std-product-glow-blue {

    width: 580px;
    height: 580px;

    inset-inline-end: -360px;
    inset-block-start: 0;

    background:
        rgba(
            55,
            124,
            229,
            .10
        );
}


/* ==========================================================================
   TOP
   ========================================================================== */

body.st-site
.std-product-top {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-block-end:
        46px;

    padding-block-end:
        17px;

    border-block-end:
        1px solid
        var(--std-border);
}


/* ==========================================================================
   BACK LINK
   ========================================================================== */

body.st-site
.std-back-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--std-dark) !important;

    font-size: 10px;

    font-weight: 900;
}


body.st-site
.std-back-link > i {

    color:
        var(--std-gold);

    font-style: normal;

    font-size: 14px;
}


/* ==========================================================================
   CODE
   ========================================================================== */

body.st-site
.std-product-code {

    display: flex;

    align-items: center;

    gap: 9px;

    direction: ltr;

    color:
        rgba(2,24,68,.34);

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.2px;
}


body.st-site
.std-product-code > i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--std-gold);
}


/* ==========================================================================
   HERO LAYOUT
   ========================================================================== */

body.st-site
.std-product-hero-layout {

    display: grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(520px,1.12fr);

    align-items: center;

    gap:
        clamp(
            60px,
            7vw,
            120px
        );
}


/* ==========================================================================
   COPY
   ========================================================================== */

body.st-site
.std-product-copy {

    min-width: 0;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

body.st-site
.std-product-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-block-end:
        18px;
}


body.st-site
.std-product-eyebrow > span {

    width: 32px;
    height: 2px;

    background:
        var(--std-gold);
}


body.st-site
.std-product-eyebrow > strong {

    color:
        var(--std-blue);

    font-size: 11px;

    font-weight: 900;
}


/* ==========================================================================
   H1
   ========================================================================== */

body.st-site
.std-product-copy h1 {

    margin: 0;

    color:
        var(--std-dark);

    font-family:
        "Inter",
        "Cairo",
        sans-serif;

    font-size:
        clamp(
            55px,
            5.2vw,
            82px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -3px;

    overflow-wrap: anywhere;
}


html[dir="rtl"]
body.st-site
.std-product-copy h1 {

    font-family:
        "Cairo",
        "Inter",
        sans-serif;

    line-height: 1.3;

    letter-spacing: 0;
}


/* ==========================================================================
   TAGLINE
   ========================================================================== */

body.st-site
.std-product-tagline {

    max-width: 620px;

    margin:
        22px
        0
        0;

    color:
        var(--std-muted);

    font-size: 18px;

    font-weight: 500;

    line-height: 1.9;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

body.st-site
.std-product-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-block-start:
        29px;
}


/* ==========================================================================
   PRIMARY
   ========================================================================== */

body.st-site
.std-product-primary {

    min-height: 56px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding:
        6px
        7px
        6px
        20px;

    border-radius:
        15px;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--std-dark),
            var(--std-blue)
        );

    box-shadow:
        0 15px 32px
        rgba(2,24,68,.18);

    font-size: 12px;

    font-weight: 900;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


html[dir="rtl"]
body.st-site
.std-product-primary {

    padding:
        6px
        20px
        6px
        7px;
}


body.st-site
.std-product-primary:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 20px 40px
        rgba(2,24,68,.24);
}


body.st-site
.std-product-primary > i {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color:
        var(--std-dark);

    background:
        var(--std-gold);
}


body.st-site
.std-product-primary svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   SECONDARY
   ========================================================================== */

body.st-site
.std-product-secondary {

    min-height: 56px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    padding-inline:
        20px;

    border:
        1px solid
        var(--std-border);

    border-radius:
        15px;

    color:
        var(--std-dark) !important;

    background:
        rgba(255,255,255,.75);

    font-size: 12px;

    font-weight: 900;
}


body.st-site
.std-product-secondary > i {

    color:
        var(--std-gold);

    font-style: normal;
}


/* ==========================================================================
   PROOF
   ========================================================================== */

body.st-site
.std-product-proof {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 8px;

    max-width: 600px;

    margin-block-start:
        38px;
}


body.st-site
.std-product-proof > div {

    min-width: 0;

    min-height: 67px;

    display: grid;

    grid-template-columns:
        37px
        minmax(0,1fr);

    align-items: center;

    gap: 9px;

    padding:
        9px;

    border:
        1px solid
        var(--std-border);

    border-radius: 14px;

    background:
        rgba(255,255,255,.65);
}


body.st-site
.std-proof-icon {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color:
        var(--std-dark);

    background:
        #fff4d0;
}


body.st-site
.std-proof-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


body.st-site
.std-product-proof strong {

    display: block;

    color:
        var(--std-dark);

    font-size: 9px;

    font-weight: 900;
}


body.st-site
.std-product-proof small {

    display: block;

    margin-block-start: 3px;

    color:
        #8794a6;

    font-size: 6px;

    font-weight: 700;
}


/* ==========================================================================
   VISUAL
   ========================================================================== */

body.st-site
.std-product-visual {

    position: relative;

    min-width: 0;

    min-height: 520px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   ORBIT
   ========================================================================== */

body.st-site
.std-product-orbit {

    position: absolute;

    width: 500px;
    height: 500px;

    max-width: 90%;

    border:
        1px dashed
        rgba(6,43,102,.11);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   MEDIA CARD
   ========================================================================== */

body.st-site
.std-product-media-card {

    position: relative;

    z-index: 4;

    width:
        min(
            100%,
            680px
        );

    padding:
        10px;

    border:
        1px solid
        rgba(6,43,102,.07);

    border-radius:
        25px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 35px 80px
        rgba(2,24,68,.13);
}


/* ==========================================================================
   MEDIA HEAD
   ========================================================================== */

body.st-site
.std-product-media-head {

    min-height: 33px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-inline:
        7px;
}


body.st-site
.std-product-media-head > div {

    display: flex;

    gap: 4px;
}


body.st-site
.std-product-media-head > div > i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #d9dfe8;
}


body.st-site
.std-product-media-head
> div
> i:first-child {

    background:
        var(--std-gold);
}


body.st-site
.std-product-media-head > span {

    color:
        #a0aaba;

    font-family:
        "Inter",
        sans-serif;

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* ==========================================================================
   PRODUCT IMAGE
   ========================================================================== */

body.st-site
.std-product-image {

    width: 100%;

    min-height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #f8faff,
            #ffffff
        );
}


body.st-site
.std-product-image img {

    display: block;

    width: 100%;
    height: 100%;

    max-height: 500px;

    /*
    |--------------------------------------------------------------------------
    | الصورة كاملة بدون قص
    |--------------------------------------------------------------------------
    */

    object-fit: contain;

    object-position: center;
}


/* ==========================================================================
   MONOGRAM
   ========================================================================== */

body.st-site
.std-product-monogram {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 160px;
    height: 160px;

    border-radius: 40px;

    color:
        var(--std-gold);

    background:
        var(--std-dark);

    font-family:
        "Inter",
        sans-serif;

    font-size: 45px;

    font-weight: 900;
}


/* ==========================================================================
   FLOATING LABELS
   ========================================================================== */

body.st-site
.std-product-floating {

    position: absolute;

    z-index: 7;

    min-height: 35px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding-inline:
        10px;

    border:
        1px solid
        var(--std-border);

    border-radius: 999px;

    color:
        var(--std-dark);

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 12px 28px
        rgba(2,24,68,.08);

    font-family:
        "Inter",
        sans-serif;

    font-size: 6px;

    font-weight: 900;
}


body.st-site
.std-product-floating > i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--std-gold);
}


body.st-site
.std-floating-one {

    inset-inline-end: 0;
    inset-block-start: 45px;
}


body.st-site
.std-floating-two {

    inset-inline-start: 0;
    inset-block-end: 50px;
}


/* ==========================================================================
   OVERVIEW
   ========================================================================== */

body.st-site
.std-product-overview {

    padding-block:
        80px;

    background:
        #ffffff;
}


/* ==========================================================================
   OVERVIEW HEAD
   ========================================================================== */

body.st-site
.std-overview-head {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 40px;

    margin-block-end:
        39px;

    padding-block-end:
        19px;

    border-block-end:
        1px solid
        var(--std-border);
}


body.st-site
.std-overview-head
> div:first-child
> span {

    display: block;

    margin-block-end: 10px;

    color:
        var(--std-gold);

    font-size: 11px;

    font-weight: 900;
}


body.st-site
.std-overview-head h2 {

    max-width: 730px;

    margin: 0;

    color:
        var(--std-dark);

    font-size:
        clamp(
            37px,
            3.5vw,
            55px
        );

    font-weight: 900;

    line-height: 1.25;
}


html[dir="rtl"]
body.st-site
.std-overview-head h2 {

    line-height: 1.45;
}


body.st-site
.std-overview-head h2 > strong {

    display: block;

    color:
        var(--std-gold);

    font-weight: 900;
}


/* ==========================================================================
   OVERVIEW INDEX
   ========================================================================== */

body.st-site
.std-overview-index {

    display: flex;

    align-items: center;

    gap: 10px;

    direction: ltr;

    color:
        #9aa6b5;

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;
}


body.st-site
.std-overview-index > span:first-child {

    color:
        var(--std-gold);
}


body.st-site
.std-overview-index > i {

    width: 30px;
    height: 1px;

    background:
        var(--std-border);
}


/* ==========================================================================
   OVERVIEW LAYOUT
   ========================================================================== */

body.st-site
.std-overview-layout {

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(360px,.85fr);

    align-items: stretch;

    gap: 15px;
}


/* ==========================================================================
   OVERVIEW COPY
   ========================================================================== */

body.st-site
.std-overview-copy {

    padding:
        34px;

    border:
        1px solid
        var(--std-border);

    border-radius:
        23px;

    background:
        #f9fbff;
}


/* ==========================================================================
   PRODUCT NAME
   ========================================================================== */

body.st-site
.std-overview-product-name {

    margin-block-end:
        24px;
}


body.st-site
.std-overview-product-name > span {

    display: block;

    color:
        var(--std-gold);

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.2px;
}


body.st-site
.std-overview-product-name > strong {

    display: block;

    margin-block-start:
        6px;

    color:
        var(--std-dark);

    font-size: 22px;

    font-weight: 900;
}


/* ==========================================================================
   OVERVIEW PARAGRAPH
   ========================================================================== */

body.st-site
.std-overview-copy > p {

    max-width: 850px;

    margin: 0;

    color:
        #66778e;

    font-size: 15px;

    font-weight: 500;

    line-height: 2.1;

    white-space: normal;
}


/* ==========================================================================
   OVERVIEW POINTS
   ========================================================================== */

body.st-site
.std-overview-points {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 8px;

    margin-block-start:
        30px;
}


body.st-site
.std-overview-points > div {

    min-height: 64px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px;

    border:
        1px solid
        var(--std-border);

    border-radius: 12px;

    background:
        #ffffff;
}


body.st-site
.std-overview-points span {

    color:
        var(--std-gold);

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;
}


body.st-site
.std-overview-points strong {

    color:
        var(--std-dark);

    font-size: 9px;

    font-weight: 900;
}


/* ==========================================================================
   OVERVIEW PANEL
   ========================================================================== */

body.st-site
.std-overview-panel {

    overflow: hidden;

    padding:
        27px;

    border-radius:
        23px;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #010b24,
            #021844 60%,
            #06316e
        );

    box-shadow:
        0 22px 50px
        rgba(2,24,68,.13);
}


/* ==========================================================================
   PANEL HEAD
   ========================================================================== */

body.st-site
.std-overview-panel-head {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-block-end:
        20px;

    border-block-end:
        1px solid
        rgba(255,255,255,.08);
}


body.st-site
.std-overview-panel-head span {

    display: block;

    color:
        var(--std-gold);

    font-size: 8px;

    font-weight: 900;
}


body.st-site
.std-overview-panel-head strong {

    display: block;

    margin-block-start:
        4px;

    color:
        #ffffff;

    font-size: 18px;

    font-weight: 900;
}


body.st-site
.std-overview-panel-head > i {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #32d990;

    box-shadow:
        0 0 0 5px
        rgba(50,217,144,.09);
}


/* ==========================================================================
   PANEL LIST
   ========================================================================== */

body.st-site
.std-overview-panel-list {

    display: grid;

    gap: 8px;

    margin-block-start:
        18px;
}


body.st-site
.std-overview-panel-list > div {

    min-height: 54px;

    display: grid;

    grid-template-columns:
        38px
        minmax(0,1fr);

    align-items: center;

    gap: 10px;

    padding-inline:
        11px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 12px;

    background:
        rgba(255,255,255,.04);
}


body.st-site
.std-overview-panel-list span {

    color:
        var(--std-gold);

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;
}


body.st-site
.std-overview-panel-list strong {

    color:
        rgba(255,255,255,.75);

    font-size: 10px;

    font-weight: 800;
}


/* ==========================================================================
   FEATURES
   ========================================================================== */

body.st-site
.std-product-features {

    position: relative;

    overflow: hidden;

    padding-block:
        80px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

    isolation: isolate;
}


/* ==========================================================================
   FEATURES GRID BG
   ========================================================================== */

body.st-site
.std-features-grid-bg {

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(6,43,102,.025)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6,43,102,.025)
            1px,
            transparent 1px
        );

    background-size:
        55px
        55px;
}


/* ==========================================================================
   FEATURES HEAD
   ========================================================================== */

body.st-site
.std-features-head {

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(330px,.8fr);

    align-items: end;

    gap: 60px;

    margin-block-end:
        35px;
}


body.st-site
.std-features-head-copy > span {

    display: block;

    margin-block-end:
        10px;

    color:
        var(--std-gold);

    font-size: 11px;

    font-weight: 900;
}


body.st-site
.std-features-head h2 {

    max-width: 760px;

    margin: 0;

    color:
        var(--std-dark);

    font-size:
        clamp(
            38px,
            3.7vw,
            58px
        );

    font-weight: 900;

    line-height: 1.25;
}


html[dir="rtl"]
body.st-site
.std-features-head h2 {

    line-height: 1.44;
}


body.st-site
.std-features-head h2 strong {

    display: block;

    color:
        var(--std-gold);
}


body.st-site
.std-features-head > p {

    max-width: 500px;

    margin: 0;

    color:
        var(--std-muted);

    font-size: 14px;

    line-height: 1.95;
}


/* ==========================================================================
   FEATURES GRID
   ========================================================================== */

body.st-site
.std-features-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 10px;
}


/* ==========================================================================
   FEATURE CARD
   ========================================================================== */

body.st-site
.std-feature-card {

    position: relative;

    min-height: 155px;

    overflow: hidden;

    padding:
        20px;

    border:
        1px solid
        var(--std-border);

    border-radius: 17px;

    background:
        rgba(255,255,255,.82);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


body.st-site
.std-feature-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(248,180,0,.25);

    box-shadow:
        0 18px 38px
        rgba(2,24,68,.06);
}


/* ==========================================================================
   FEATURE TOP
   ========================================================================== */

body.st-site
.std-feature-top {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


body.st-site
.std-feature-top > span {

    color:
        #9aa6b5;

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;
}


/* ==========================================================================
   FEATURE ICON
   ========================================================================== */

body.st-site
.std-feature-icon {

    width: 37px;
    height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color:
        var(--std-dark);

    background:
        #fff1bd;
}


body.st-site
.std-feature-icon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   FEATURE TITLE
   ========================================================================== */

body.st-site
.std-feature-card h3 {

    max-width: 90%;

    margin:
        22px
        0
        0;

    color:
        var(--std-dark);

    font-size: 15px;

    font-weight: 900;

    line-height: 1.7;
}


/* ==========================================================================
   FEATURE LINE
   ========================================================================== */

body.st-site
.std-feature-line {

    position: absolute;

    inset-inline-start: 20px;
    inset-block-end: 17px;

    width: 36px;
    height: 2px;

    border-radius: 999px;

    background:
        var(--std-gold);
}


/* ==========================================================================
   CTA
   ========================================================================== */

body.st-site
.std-product-cta {

    padding-block:
        65px;

    background:
        #ffffff;
}


/* ==========================================================================
   CTA CARD
   ========================================================================== */

body.st-site
.std-product-cta-card {

    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        auto;

    align-items: center;

    gap: 60px;

    padding:
        40px;

    border-radius: 27px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #010b24,
            #021844 60%,
            #063170
        );

    box-shadow:
        0 30px 70px
        rgba(2,24,68,.17);

    isolation: isolate;
}


/* ==========================================================================
   CTA GRID
   ========================================================================== */

body.st-site
.std-product-cta-grid {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        );

    background-size:
        40px
        40px;
}


/* ==========================================================================
   CTA COPY
   ========================================================================== */

body.st-site
.std-product-cta-copy > span {

    display: block;

    color:
        var(--std-gold);

    font-family:
        "Inter",
        sans-serif;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.2px;
}


body.st-site
.std-product-cta-copy h2 {

    max-width: 800px;

    margin:
        10px
        0
        13px;

    color:
        #ffffff;

    font-size:
        clamp(
            36px,
            3.5vw,
            53px
        );

    font-weight: 900;

    line-height: 1.3;
}


html[dir="rtl"]
body.st-site
.std-product-cta-copy h2 {

    line-height: 1.5;
}


body.st-site
.std-product-cta-copy h2 > strong {

    color:
        var(--std-gold);

    font-weight: 900;
}


body.st-site
.std-product-cta-copy > p {

    max-width: 700px;

    margin: 0;

    color:
        rgba(255,255,255,.52);

    font-size: 13px;

    line-height: 1.9;
}


/* ==========================================================================
   CTA ACTIONS
   ========================================================================== */

body.st-site
.std-product-cta-actions {

    min-width: 220px;

    display: grid;

    gap: 8px;
}


/* ==========================================================================
   CTA DEMO
   ========================================================================== */

body.st-site
.std-cta-demo {

    min-height: 55px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        6px
        7px
        6px
        18px;

    border-radius: 14px;

    color:
        var(--std-dark) !important;

    background:
        var(--std-gold);

    font-size: 11px;

    font-weight: 900;
}


html[dir="rtl"]
body.st-site
.std-cta-demo {

    padding:
        6px
        18px
        6px
        7px;
}


body.st-site
.std-cta-demo > i {

    width: 41px;
    height: 41px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color:
        #ffffff;

    background:
        var(--std-dark);
}


body.st-site
.std-cta-demo svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;
}


/* ==========================================================================
   CTA ORDER
   ========================================================================== */

body.st-site
.std-cta-order {

    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding-inline:
        15px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        13px;

    color:
        rgba(255,255,255,.78) !important;

    background:
        rgba(255,255,255,.04);

    font-size: 10px;

    font-weight: 900;
}


/* ==========================================================================
   LAPTOP
   ========================================================================== */

@media (max-width: 1280px) {

    body.st-site
    .std-product-hero-layout {

        grid-template-columns:
            minmax(0,.9fr)
            minmax(450px,1.1fr);

        gap: 50px;
    }


    body.st-site
    .std-product-copy h1 {

        font-size:
            clamp(
                48px,
                5vw,
                68px
            );
    }


    body.st-site
    .std-product-tagline {

        font-size: 16px;
    }


    body.st-site
    .std-product-visual {

        min-height: 470px;
    }


    body.st-site
    .std-product-image {

        min-height: 340px;
    }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {

    body.st-site
    .std-product-hero {

        padding-block:
            95px
            62px;
    }


    body.st-site
    .std-product-hero-layout {

        grid-template-columns:
            1fr;

        gap: 45px;
    }


    body.st-site
    .std-product-copy {

        max-width: 720px;

        margin-inline: auto;

        text-align: center;
    }


    body.st-site
    .std-product-eyebrow {

        justify-content: center;
    }


    body.st-site
    .std-product-copy h1 {

        text-align: center;
    }


    body.st-site
    .std-product-tagline {

        max-width: 650px;

        margin-inline: auto;
    }


    body.st-site
    .std-product-actions {

        justify-content: center;
    }


    body.st-site
    .std-product-proof {

        max-width: 620px;

        margin-inline: auto;
    }


    body.st-site
    .std-product-visual {

        min-height: 470px;
    }


    body.st-site
    .std-product-media-card {

        width:
            min(
                92%,
                680px
            );
    }


    body.st-site
    .std-overview-layout {

        grid-template-columns:
            1fr;

        gap: 12px;
    }


    body.st-site
    .std-features-head {

        grid-template-columns:
            1fr;

        gap: 18px;

        text-align: center;
    }


    body.st-site
    .std-features-head h2,

    body.st-site
    .std-features-head > p {

        margin-inline: auto;
    }


    body.st-site
    .std-features-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    /* ----------------------------------------------------------------------
       Hero
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-hero {

        padding-block:
            84px
            48px;
    }


    body.st-site
    .std-product-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-block-end:
            30px;

        padding-block-end:
            14px;
    }


    body.st-site
    .std-product-code {

        flex-wrap: wrap;

        font-size: 5.5px;
    }


    body.st-site
    .std-product-eyebrow > strong {

        font-size: 9px;
    }


    body.st-site
    .std-product-copy h1 {

        max-width: 350px;

        margin-inline: auto;

        font-size:
            clamp(
                38px,
                11vw,
                48px
            );

        line-height: 1.1;
    }


    html[dir="rtl"]
    body.st-site
    .std-product-copy h1 {

        line-height: 1.35;
    }


    body.st-site
    .std-product-tagline {

        max-width: 340px;

        margin-block-start:
            14px;

        font-size: 13px;

        line-height: 1.85;
    }


    /* ----------------------------------------------------------------------
       Actions
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-actions {

        width: 100%;

        max-width: 340px;

        display: grid;

        grid-template-columns: 1fr;

        margin:
            21px
            auto
            0;
    }


    body.st-site
    .std-product-primary,

    body.st-site
    .std-product-secondary {

        width: 100%;

        min-height: 50px;
    }


    /* ----------------------------------------------------------------------
       Proof
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-proof {

        max-width: 340px;

        gap: 5px;

        margin-block-start:
            24px;
    }


    body.st-site
    .std-product-proof > div {

        min-height: 72px;

        grid-template-columns: 1fr;

        gap: 5px;

        padding: 7px;

        text-align: center;
    }


    body.st-site
    .std-proof-icon {

        width: 33px;
        height: 33px;

        margin-inline: auto;
    }


    /* ----------------------------------------------------------------------
       Visual
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-visual {

        min-height: 0;

        padding-block:
            12px;
    }


    body.st-site
    .std-product-media-card {

        width: 100%;

        max-width: 350px;

        padding: 7px;

        border-radius: 19px;
    }


    body.st-site
    .std-product-image {

        min-height: 0;

        aspect-ratio:
            1 / 1.02;

        border-radius: 13px;
    }


    body.st-site
    .std-product-image img {

        max-height: none;

        object-fit: contain;
    }


    body.st-site
    .std-product-orbit {

        width: 320px;
        height: 320px;
    }


    body.st-site
    .std-product-floating {

        min-height: 28px;

        font-size: 5px;
    }


    body.st-site
    .std-floating-one {

        inset-block-start: 0;
    }


    body.st-site
    .std-floating-two {

        display: none;
    }


    /* ----------------------------------------------------------------------
       Overview
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-overview {

        padding-block:
            50px;
    }


    body.st-site
    .std-overview-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        margin-block-end:
            25px;
    }


    body.st-site
    .std-overview-head h2 {

        max-width: 340px;

        font-size: 30px;
    }


    body.st-site
    .std-overview-copy {

        padding:
            20px
            17px;

        border-radius: 18px;
    }


    body.st-site
    .std-overview-product-name > strong {

        font-size: 18px;
    }


    body.st-site
    .std-overview-copy > p {

        font-size: 12px;

        line-height: 1.9;
    }


    body.st-site
    .std-overview-points {

        grid-template-columns:
            1fr;

        gap: 6px;

        margin-block-start:
            20px;
    }


    body.st-site
    .std-overview-points > div {

        min-height: 50px;
    }


    body.st-site
    .std-overview-panel {

        padding:
            20px
            17px;

        border-radius: 18px;
    }


    /* ----------------------------------------------------------------------
       Features
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-features {

        padding-block:
            50px;
    }


    body.st-site
    .std-features-head {

        margin-block-end:
            25px;
    }


    body.st-site
    .std-features-head h2 {

        max-width: 340px;

        font-size: 30px;
    }


    body.st-site
    .std-features-head > p {

        max-width: 335px;

        font-size: 12px;
    }


    body.st-site
    .std-features-grid {

        grid-template-columns:
            1fr;

        gap: 8px;

        max-width: 390px;

        margin-inline: auto;
    }


    body.st-site
    .std-feature-card {

        min-height: 125px;

        padding: 16px;

        border-radius: 15px;
    }


    body.st-site
    .std-feature-card:hover {

        transform: none;
    }


    body.st-site
    .std-feature-card h3 {

        margin-block-start:
            15px;

        font-size: 13px;
    }


    /* ----------------------------------------------------------------------
       CTA
       ---------------------------------------------------------------------- */

    body.st-site
    .std-product-cta {

        padding-block:
            42px;
    }


    body.st-site
    .std-product-cta-card {

        grid-template-columns:
            1fr;

        gap: 25px;

        padding:
            24px
            18px;

        border-radius: 20px;

        text-align: center;
    }


    body.st-site
    .std-product-cta-copy h2 {

        max-width: 340px;

        margin-inline: auto;

        font-size: 30px;
    }


    body.st-site
    .std-product-cta-copy > p {

        max-width: 335px;

        margin-inline: auto;

        font-size: 11.5px;
    }


    body.st-site
    .std-product-cta-actions {

        width: 100%;

        max-width: 340px;

        margin-inline: auto;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    body.st-site
    .std-product-copy h1 {

        max-width: 315px;

        font-size: 36px;
    }


    body.st-site
    .std-product-tagline {

        max-width: 315px;

        font-size: 12.5px;
    }


    body.st-site
    .std-product-actions,

    body.st-site
    .std-product-proof {

        max-width: 315px;
    }


    body.st-site
    .std-product-media-card {

        max-width: 320px;
    }


    body.st-site
    .std-overview-head h2,

    body.st-site
    .std-features-head h2,

    body.st-site
    .std-product-cta-copy h2 {

        max-width: 315px;

        font-size: 28px;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 360px) {

    body.st-site
    .std-product-copy h1 {

        max-width: 290px;

        font-size: 32px;
    }


    body.st-site
    .std-product-media-card {

        max-width: 300px;
    }


    body.st-site
    .std-product-proof {

        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    body.st-site
    .std-product-primary,

    body.st-site
    .std-feature-card {

        transition: none !important;
    }

}