/* GET About / 360° solutions — standalone component */
.get-about {
    --about-navy: #253746;
    --about-yellow: #ffcc00;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(92px, 10vw, 148px) 0;
    color: var(--about-navy);
    background: linear-gradient(160deg, #f7f8fa 0%, #fff 64%, #f4f6f8 100%);
}

.get-about__ambient {
    position: absolute;
    z-index: -1;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(55px);
}

.get-about__ambient--one {
    top: -310px;
    right: -200px;
    background: rgba(255, 204, 0, .12);
}

.get-about__copy { max-width: 600px; }

.get-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #937400;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.get-about__eyebrow-line { width: 27px; height: 2px; background: var(--about-yellow); }

.get-about__heading {
    max-width: 610px;
    margin: 0 0 25px;
    color: var(--about-navy);
    font-size: clamp(38px, 4.6vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.055em;
}

.get-about__heading span { color: #b48f00; }

.get-about__lead {
    max-width: 540px;
    margin: 0;
    color: #526576;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.85;
}

.get-about__divider { width: 72px; height: 3px; margin: 32px 0; background: var(--about-yellow); border-radius: 3px; }

.get-about__subheading { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 29px); font-weight: 800; letter-spacing: -.035em; }
.get-about__body { max-width: 540px; color: #607182; font-size: 15px; line-height: 1.9; }

.get-about__features { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 25px 0 32px; }
.get-about__features span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.get-about__features i { color: #b48f00; font-size: 17px; }

.get-about__link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 15px 21px;
    border-radius: 10px;
    background: var(--about-navy);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    transition: background .25s, transform .25s;
}
.get-about__link:hover { background: #3b5263; color: #fff; transform: translateY(-2px); }
.get-about__link i { color: var(--about-yellow); }

.get-about__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 700px;
}

.get-about__stage::before {
    content: "";
    position: absolute;
    width: min(92%, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,204,0,.16), rgba(255,204,0,.025) 53%, transparent 72%);
    pointer-events: none;
}

.get-about__orbit { position: absolute; width: min(93%, 550px); aspect-ratio: 1; border: 1px solid rgba(37,55,70,.09); border-radius: 50%; pointer-events: none; }
.get-about__orbit--inner { width: min(75%, 430px); border-style: dashed; border-color: rgba(180,143,0,.2); animation: get-about-orbit 50s linear infinite; }
.get-about__spark { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--about-yellow); box-shadow: 0 0 0 7px rgba(255,204,0,.15), 0 0 25px rgba(255,204,0,.6); }
.get-about__spark--a { top: 18%; right: 15%; }
.get-about__spark--b { bottom: 23%; left: 11%; width: 6px; height: 6px; }

.get-device {
    position: relative;
    z-index: 2;
    width: min(290px, 64vw);
    padding: 17px 12px 19px;
    border: 4px solid #171b1f;
    border-radius: 40px;
    background: linear-gradient(100deg, #11161b, #30363b 22%, #12171b 79%, #353c42);
    box-shadow: inset 0 0 0 2px #4b5359, inset 0 0 0 5px #101317, 0 34px 65px rgba(26,40,52,.23), 0 0 0 11px rgba(37,55,70,.035);
    animation: get-about-float 6s ease-in-out infinite;
}

.get-device__top { height: 21px; display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.get-device__camera { width: 7px; height: 7px; border: 2px solid #4e5c68; background: #080b0e; border-radius: 50%; }
.get-device__speaker { width: 39px; height: 4px; margin-top: 2px; border-radius: 8px; background: #080c10; }
.get-device__screen { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border: 2px solid #07090b; border-radius: 5px; background: #253746; }
.get-device__video { display: block; width: 100%; height: 100%; object-fit: cover; }

.get-device__control {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s, background .25s;
}
.get-device__control:hover, .get-device__control:focus-visible, .get-device__control.is-paused { opacity: 1; background: rgba(8,18,26,.24); }
.get-device__control:focus-visible { outline: 3px solid var(--about-yellow); outline-offset: -5px; }
.get-device__control-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(20,35,47,.7); color: #fff; font-size: 27px; backdrop-filter: blur(8px); }
.get-device__bottom { display: grid; place-items: center; height: 19px; }
.get-device__bottom span { width: 55px; height: 4px; border-radius: 8px; background: #555e66; }
.get-device__side-button { position: absolute; top: 25%; right: -7px; width: 4px; height: 56px; border-radius: 0 3px 3px 0; background: #b92d34; }

.get-about__floating {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    border: 1px solid rgba(37,55,70,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 15px 45px rgba(37,55,70,.12);
    color: var(--about-navy);
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
    animation: get-about-float 7s ease-in-out infinite;
}
.get-about__floating i { color: #b48f00; font-size: 21px; }
.get-about__floating--top { top: 22%; right: 0; animation-delay: -2s; }
.get-about__floating--bottom { bottom: 24%; left: 0; animation-delay: -4s; }
.get-about__stage-label { margin-top: 30px; color: #425767; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.get-about__stage-label-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--about-yellow); }
.get-about__stage-label-separator { padding: 0 8px; color: #b5c1c8; }
.get-about__video-hint { margin: 8px 0 0; color: #7e8e99; font-size: 12px; text-align: center; }

@keyframes get-about-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes get-about-orbit { to { transform: rotate(360deg); } }

@media (max-width: 991.98px) {
    .get-about { padding: 88px 0; }
    .get-about__stage { min-height: 660px; }
    .get-about__copy { max-width: 680px; }
}
@media (max-width: 575.98px) {
    .get-about { padding: 75px 0; }
    .get-about__stage { min-height: 595px; }
    .get-about__floating { padding: 9px 11px; font-size: 10px; }
    .get-about__floating--top { right: -6px; top: 19%; }
    .get-about__floating--bottom { left: -6px; bottom: 24%; }
    .get-device { width: min(270px, 66vw); }
}
@media (prefers-reduced-motion: reduce) {
    .get-about__orbit--inner, .get-device, .get-about__floating { animation: none !important; }
    .get-about__link, .get-device__control { transition: none; }
}


/* =============================================
   Modern edge-to-edge smartphone frame
   Overrides the previous rugged device design.
   ============================================= */
.get-device {
    width: min(294px, 66vw);
    padding: 7px;
    border: 2px solid #70777e;
    border-radius: 49px;
    background: linear-gradient(130deg, #c0c6c9 0%, #424a51 19%, #141b22 48%, #707b83 80%, #c0c6c9 100%);
    box-shadow:
        inset 0 0 0 2px #111820,
        0 35px 75px rgba(25, 40, 53, .24),
        0 0 0 10px rgba(37, 55, 70, .025);
}

.get-device__screen {
    position: relative;
    aspect-ratio: 9 / 19.5;
    overflow: hidden;
    border: 2px solid #080b0e;
    border-radius: 40px;
    background: #253746;
}

.get-device__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.get-device__island {
    position: absolute;
    z-index: 5;
    top: 17px;
    left: 50%;
    width: 92px;
    height: 25px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 100px;
    background: #080b0e;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.get-device__island-camera {
    position: absolute;
    right: 11px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #334c66, #080b0e 75%);
}

.get-device__home-indicator {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 16px;
    width: 91px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 100px;
    background: rgba(255, 255, 255, .83);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.get-device__side-button {
    position: absolute;
    top: 24%;
    right: -5px;
    width: 3px;
    height: 47px;
    border-radius: 0 3px 3px 0;
    background: #525b64;
}

.get-device__control {
    border-radius: 38px;
}

@media (max-width: 575.98px) {
    .get-device {
        width: min(265px, 70vw);
    }
}