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

.hero {

    position: relative;

    overflow: hidden;

    padding: 170px 0 120px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #eef5ff 100%
        );

}


/*====================================================
GRID BACKGROUND
====================================================*/

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(37,99,235,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37,99,235,.05) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    pointer-events: none;

}


/*====================================================
BACKGROUND GLOW
====================================================*/

.hero::after {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -250px;

    top: -120px;

    background:

        radial-gradient(
            circle,
            #dbeafe 0%,
            transparent 70%
        );

    pointer-events: none;

}


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

.hero-container {

    width: min(92%,1320px);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    position: relative;

    z-index: 2;
    margin-top: 90px;

}


/*====================================================
LEFT SIDE
====================================================*/

.hero-left {

    max-width: 620px;

}


/*====================================================
BADGE
====================================================*/

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 18px;

    border-radius: 50px;

    background: #eef4ff;

    border: 1px solid #c7d2fe;

    color: #2563eb;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

    margin-bottom: 30px;

}


/*====================================================
HEADING
====================================================*/

.hero h1 {

    font-size: 68px;

    line-height: 1.08;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 24px;

}


.hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


/*====================================================
DESCRIPTION
====================================================*/

.hero p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748b;

    margin-bottom: 30px;

}


/*====================================================
TECH TAGS
====================================================*/

.hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 40px;

}


.hero-tags span {

    padding: 10px 18px;

    background: #fff;

    border-radius: 30px;

    border: 1px solid #edf2f7;

    font-size: 14px;

    font-weight: 600;

    color: #475569;

    transition: .3s;

}


.hero-tags span:hover {

    background: #2563eb;

    color: #fff;

    border-color: #2563eb;

    transform: translateY(-2px);

}


/*====================================================
BUTTONS
====================================================*/

.hero-buttons {

    display: flex;

    gap: 18px;

    margin-bottom: 35px;

}


.hero-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 28px;

    border-radius: 14px;

    font-weight: 600;

    transition: .35s;

}


/* Primary */

.hero-btn.primary {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #fff;

    box-shadow:
        0 20px 35px rgba(37,99,235,.25);

}


.hero-btn.primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 25px 45px rgba(37,99,235,.35);

}


/* Secondary */

.hero-btn.secondary {

    background: #fff;

    color: #2563eb;

    border: 2px solid #2563eb;

}


.hero-btn.secondary:hover {

    background: #2563eb;

    color: #fff;

    transform: translateY(-3px);

}


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

.hero-features {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    margin-bottom: 45px;

}


.hero-features div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #475569;

    font-size: 15px;

}


.hero-features i {

    color: #10b981;

}


/*====================================================
STATS
====================================================*/

.hero-stats {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 25px;

}


.hero-stats h2 {

    font-size: 34px;

    color: #2563eb;

    margin-bottom: 8px;

}


.hero-stats span {

    color: #64748b;

    font-size: 14px;

}


/*====================================================
RIGHT SIDE
====================================================*/

.hero-right {

    position: relative;

    height: 700px;

}


/*====================================================
PLATFORM
====================================================*/

.platform {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 320px;

    height: 320px;

    transform:
        translate(-50%,-50%);

    perspective: 1200px;

    z-index: 20;

}


/*====================================================
PLATFORM GLOW
====================================================*/

.platform::before {

    content: "";

    position: absolute;

    width: 460px;

    height: 460px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(34,211,238,.14) 0%,
            rgba(37,99,235,.12) 30%,
            rgba(124,58,237,.12) 50%,
            transparent 72%
        );

    filter: blur(30px);

    z-index: -10;

    animation:
        platformGlow 5s ease-in-out infinite;

}


/*====================================================
3D OBJECT
====================================================*/

.datics-3d {

    position: relative;

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

    animation:
        daticsFloat 5s ease-in-out infinite;

}


/*====================================================
3D BACK DEPTH
====================================================*/

.datics-depth {

    position: absolute;

    width: 270px;

    height: 270px;

    left: 25px;

    top: 38px;

    border-radius: 50%;

    background:

        linear-gradient(
            145deg,
            #dbeafe 0%,
            #a5b4fc 50%,
            #6d28d9 100%
        );

    box-shadow:

        0 30px 55px
        rgba(37,99,235,.25),

        0 15px 35px
        rgba(124,58,237,.18);

    transform:
        translateZ(-30px);

}


/*====================================================
MAIN WHITE DISK
====================================================*/

.datics-disk {

    position: absolute;

    width: 280px;

    height: 280px;

    left: 20px;

    top: 20px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 25%,
            #ffffff 0%,
            #ffffff 50%,
            #f7faff 75%,
            #e8efff 100%
        );

    border: 7px solid #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateZ(20px);

    box-shadow:

        0 25px 55px
        rgba(15,23,42,.14),

        0 12px 35px
        rgba(37,99,235,.18),

        inset 0 2px 5px
        rgba(255,255,255,.95),

        inset 0 -8px 20px
        rgba(37,99,235,.08);

}


/*====================================================
GRADIENT BORDER
====================================================*/

.datics-ring {

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background:

        conic-gradient(
            from 210deg,
            #22d3ee,
            #0ea5e9,
            #2563eb,
            #4f46e5,
            #7c3aed,
            #2563eb,
            #22d3ee
        );

    padding: 4px;

    -webkit-mask:

        linear-gradient(#fff 0 0)
        content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: .95;

}


/*====================================================
LOGO WRAPPER
====================================================*/

.datics-logo-wrap {

    position: relative;

    width: 135px;

    height: 135px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    background: transparent;

}


/*====================================================
LOGO DEPTH
====================================================*/

.datics-logo-wrap::before {

    content: "";

    position: absolute;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background:

        linear-gradient(
            135deg,
            #c7d2fe,
            #6366f1,
            #4c1d95
        );

    transform:
        translateY(10px)
        translateZ(-15px);

    opacity: .35;

    filter: blur(1px);

}


/*====================================================
LOGO GLOW
====================================================*/

.datics-logo-wrap::after {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(34,211,238,.16),
            rgba(37,99,235,.10) 40%,
            rgba(124,58,237,.08) 60%,
            transparent 75%
        );

    filter: blur(18px);

    z-index: -2;

}


/*====================================================
DATICS LOGO IMAGE
====================================================*/

.datics-logo {

    display: block;

    width: 125px !important;

    height: 125px !important;

    object-fit: contain !important;

    object-position: center;

    position: relative;

    z-index: 20;

    transform:
        translateZ(35px);

    /*
       IMPORTANT:
       Do NOT use object-fit: cover.
    */

    filter:

        drop-shadow(
            0 8px 5px
            rgba(15,23,42,.18)
        )

        drop-shadow(
            0 15px 20px
            rgba(37,99,235,.18)
        );

    transition: .4s ease;
    border-radius: 50%;

}


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

.ring {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    pointer-events: none;

}


.ring1 {

    width: 350px;

    height: 350px;

    border:
        2px dashed
        rgba(37,99,235,.10);

}


.ring2 {

    width: 460px;

    height: 460px;

    border:
        2px dashed
        rgba(99,102,241,.10);

}


.ring3 {

    width: 580px;

    height: 580px;

    border:
        2px dashed
        rgba(124,58,237,.08);

}


/*====================================================
FLOATING CARDS
====================================================*/

.floating-card {

    position: absolute;

    background: #fff;

    border-radius: 18px;

    padding: 16px 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 200px;

    box-shadow:

        0 18px 45px
        rgba(15,23,42,.08);

    border:
        1px solid #edf2f7;

    transition: .35s;

    z-index: 30;

}


.floating-card:hover {

    transform:
        translateY(-6px)
        scale(1.02);

    box-shadow:

        0 25px 55px
        rgba(15,23,42,.12);

}


.floating-card i {

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 16px;

    font-size: 24px;

    flex-shrink: 0;

}


.floating-card small {

    display: block;

    color: #64748b;

    font-size: 12px;

}


.floating-card strong {

    display: block;

    margin-top: 4px;

    font-size: 16px;

    color: #0f172a;

    white-space: nowrap;

}


/*====================================================
CARD COLORS
====================================================*/

.card-web i {

    background: #eef4ff;

    color: #2563eb;

}


.card-ai i {

    background: #f3e8ff;

    color: #7c3aed;

}


.card-growth i {

    background: #dcfce7;

    color: #16a34a;

}


.card-commerce i {

    background: #ecfccb;

    color: #65a30d;

}


.card-cloud i {

    background: #ecfeff;

    color: #0891b2;

}


.card-rating i {

    background: #dbeafe;

    color: #2563eb;

}


/*====================================================
CARD POSITIONS
====================================================*/

.card-web {

    top: 70px;

    right: 70px;

}


.card-ai {

    top: 180px;

    right: -10px;

}


.card-growth {

    left: 30px;

    top: 260px;

}


.card-commerce {

    left: 40px;

    top: 110px;

}


.card-cloud {

    left: 90px;

    bottom: 80px;

}


.card-rating {

    right: 40px;

    bottom: 70px;

}


/*====================================================
3D FLOATING ANIMATION
====================================================*/

@keyframes daticsFloat {

    0% {

        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotateX(2deg)
            rotateY(-3deg);

    }

    100% {

        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0deg);

    }

}


/*====================================================
CENTER GLOW ANIMATION
====================================================*/

@keyframes platformGlow {

    0%,
    100% {

        transform:
            translate(-50%,-50%)
            scale(.95);

        opacity: .65;

    }

    50% {

        transform:
            translate(-50%,-50%)
            scale(1.08);

        opacity: 1;

    }

}


/*====================================================
LOGO LIGHT ANIMATION
====================================================*/

.datics-disk {

    animation:
        logoLight 4s ease-in-out infinite;

}


@keyframes logoLight {

    0%,
    100% {

        box-shadow:

            0 25px 55px
            rgba(15,23,42,.14),

            0 12px 35px
            rgba(37,99,235,.16),

            inset 0 2px 5px
            rgba(255,255,255,.95),

            inset 0 -8px 20px
            rgba(37,99,235,.08);

    }

    50% {

        box-shadow:

            0 30px 65px
            rgba(15,23,42,.18),

            0 15px 45px
            rgba(37,99,235,.25),

            0 0 35px
            rgba(37,99,235,.10),

            inset 0 2px 5px
            rgba(255,255,255,1);

    }

}


/*====================================================
HOVER EFFECT
====================================================*/

.platform:hover .datics-3d {

    animation-play-state: paused;

    transform:

        translateY(-8px)
        rotateX(4deg)
        rotateY(-6deg)
        scale(1.04);

    transition: .5s ease;

}


.platform:hover .datics-logo {

    filter:

        drop-shadow(
            0 10px 8px
            rgba(15,23,42,.20)
        )

        drop-shadow(
            0 20px 30px
            rgba(37,99,235,.30)
        );

}


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

.hero-wave {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    line-height: 0;

    z-index: 5;

}


.hero-wave svg {

    display: block;

    width: 100%;

    height: 90px;

}


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

@media (max-width: 1100px) {

    .hero-container {

        gap: 30px;

    }


    .hero h1 {

        font-size: 58px;

    }


    .hero-right {

        height: 650px;

    }


    .platform {

        transform:
            translate(-50%,-50%)
            scale(.90);

    }


    .card-web {

        right: 30px;

    }


    .card-ai {

        right: -20px;

    }


    .card-commerce {

        left: 0;

    }


    .card-growth {

        left: 0;

    }

}


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

@media (max-width: 992px) {

    .hero {

        padding:
            130px 0 100px;

    }


    .hero-container {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .hero-left {

        max-width: 100%;

        text-align: center;

    }


    .hero-badge {

        justify-content: center;

    }


    .hero-tags {

        justify-content: center;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-features {

        justify-content: center;

    }


    .hero-stats {

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

        text-align: center;

    }


    .hero-right {

        height: 650px;

        margin-top: 20px;

    }


    .platform {

        transform:
            translate(-50%,-50%)
            scale(.90);

    }

}


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

@media (max-width: 600px) {

    .hero {

        padding:
            110px 0 80px;

    }


    .hero h1 {

        font-size: 42px;

        line-height: 1.12;

    }


    .hero p {

        font-size: 16px;

        line-height: 1.7;

    }


    .hero-badge {

        font-size: 10px;

        padding:
            7px 12px;

    }


    .hero-tags {

        gap: 8px;

    }


    .hero-tags span {

        padding:
            8px 12px;

        font-size: 12px;

    }


    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }


    .hero-btn {

        width: 100%;

    }


    .hero-features {

        flex-direction: column;

        align-items: flex-start;

        width: fit-content;

        margin-left: auto;

        margin-right: auto;

        gap: 12px;

    }


    .hero-stats {

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

        gap: 20px 10px;

    }


    .hero-stats h2 {

        font-size: 28px;

    }


    .hero-stats span {

        font-size: 12px;

    }


    /* Smaller right section */

    .hero-right {

        height: 500px;

        margin-top: 0;

    }


    .platform {

        width: 300px;

        height: 300px;

        transform:
            translate(-50%,-50%)
            scale(.78);

    }


    /* Hide outer orbit on small screens */

    .ring3 {

        width: 500px;

        height: 500px;

    }


    /* Cards */

    .floating-card {

        min-width: 165px;

        padding:
            10px 12px;

        gap: 10px;

        border-radius: 14px;

    }


    .floating-card i {

        width: 42px;

        height: 42px;

        font-size: 19px;

        border-radius: 12px;

    }


    .floating-card small {

        font-size: 10px;

    }


    .floating-card strong {

        font-size: 13px;

    }


    .card-web {

        top: 20px;

        right: 5px;

    }


    .card-ai {

        top: 135px;

        right: -15px;

    }


    .card-commerce {

        top: 80px;

        left: -10px;

    }


    .card-growth {

        top: 220px;

        left: -15px;

    }


    .card-cloud {

        bottom: 20px;

        left: 10px;

    }


    .card-rating {

        bottom: 15px;

        right: -10px;

    }


    .hero-wave svg {

        height: 55px;

    }

}


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

@media (max-width: 400px) {

    .hero h1 {

        font-size: 36px;

    }


    .hero-right {

        height: 450px;

    }


    .platform {

        transform:
            translate(-50%,-50%)
            scale(.68);

    }


    .floating-card {

        min-width: 150px;

    }


    .floating-card strong {

        font-size: 12px;

    }


    .card-ai {

        right: -35px;

    }


    .card-rating {

        right: -30px;

    }

}