/* =======================================================
   10K Analytics
   Main Stylesheet
   ======================================================= */

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

:root {

    --background: #4A545D;
    --background-dark: #39424A;

    --surface: #55616B;

    --primary: #D8F54A;
    --primary-hover: #E8FF70;

    --text: #FFFFFF;
    --text-light: #D8DEE3;

    --border: rgba(255,255,255,.08);

    --shadow:
        0 12px 40px rgba(0,0,0,.18);

    --radius: 14px;

    --transition: .25s ease;

    --container-width: 1200px;

}

/* =======================================================
   RESET
   ======================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.7;

    font-size:17px;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(92%, var(--container-width));

    margin:auto;

}

/* =======================================================
   TYPOGRAPHY
   ======================================================= */

h1{

    font-size:3.6rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:25px;

}

h2{

    font-size:2.3rem;

    margin-bottom:30px;

    text-align:center;

}

h3{

    margin-bottom:15px;

    font-size:1.3rem;

}

p{

    color:var(--text-light);

    margin-bottom:20px;

}

/* =======================================================
   HEADER
   ======================================================= */

header{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(12px);

    background:rgba(74,84,93,.90);

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

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo img{

    width:70px;

}

nav ul{

    display:flex;

    gap:40px;

}

nav a{

    transition:var(--transition);

    font-weight:500;

}

nav a:hover{

    color:var(--primary);

}

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

.hero{

    min-height:88vh;

    display:flex;

    align-items:center;

    text-align:center;

}

.hero-content{

    max-width:850px;

}

.hero p{

    font-size:1.2rem;

    margin:35px auto;

    max-width:700px;

}

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

.btn-primary{

    display:inline-block;

    padding:16px 34px;

    background:var(--primary);

    color:#232B30;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

/* =======================================================
   SECTIONS
   ======================================================= */

section{

    padding:110px 0;

}

.dark-section{

    background:var(--background-dark);

}

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

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:45px;

}

.card{

    background:var(--surface);

    padding:35px;

    border-radius:var(--radius);

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

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}

.card p{

    margin-bottom:0;

}

/* =======================================================
   INDUSTRY GRID
   ======================================================= */

.industry-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:45px;

}

.industry-grid div{

    background:var(--surface);

    border-radius:var(--radius);

    text-align:center;

    padding:28px;

    font-weight:600;

    transition:var(--transition);

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

}

.industry-grid div:hover{

    background:var(--primary);

    color:#1F2529;

    cursor:default;

}

/* =======================================================
   ABOUT
   ======================================================= */

#about p{

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

    text-align:center;

}

/* =======================================================
   CONTACT
   ======================================================= */

#contact{

    text-align:center;

}

#contact p{

    max-width:700px;

    margin:0 auto 35px;

}

/* =======================================================
   FOOTER
   ======================================================= */

footer{

    background:#31383E;

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

    text-align:center;

    padding:60px 0;

}

.footer-logo{

    width:85px;

    margin:0 auto 25px;

}

footer p{

    margin-bottom:10px;

}

/* =======================================================
   SIMPLE FADE ANIMATION
   ======================================================= */

.card,
.industry-grid div{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width:900px){

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2rem;

    }

    nav ul{

        gap:22px;

    }

}

@media (max-width:700px){

    .nav-container{

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:16px;

    }

    h1{

        font-size:2.2rem;

    }

    section{

        padding:80px 0;

    }

    .hero{

        min-height:70vh;

    }

    .btn-primary{

        width:100%;

        max-width:320px;

    }

}

@media (max-width:480px){

    body{

        font-size:16px;

    }

    h1{

        font-size:1.9rem;

    }

    h2{

        font-size:1.7rem;

    }

    .card{

        padding:25px;

    }

}



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

.hero {

    position: relative;

    overflow: hidden;

    min-height: 92vh;

    display: flex;

    align-items: center;

}

.hero-layout {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 80px;

    align-items: center;

    position: relative;

    z-index: 5;

}

.hero-text h1 {

    font-size: 4.2rem;

    margin: 25px 0;

}

.hero-text p {

    font-size: 1.2rem;

    max-width: 650px;

}

.hero-badge {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 999px;

    background: rgba(216,245,74,.15);

    border: 1px solid rgba(216,245,74,.25);

    color: var(--primary);

    font-size: .9rem;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    margin-top: 40px;

    flex-wrap: wrap;

}

.btn-secondary {

    padding: 16px 34px;

    border-radius: 999px;

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

    transition: .3s;

}

.btn-secondary:hover {

    border-color: var(--primary);

    color: var(--primary);

}

/* Background */

.hero-background {

	position:absolute;
    inset:0;
	
    pointer-events: none;

}


.grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size: 40px 40px;

    mask-image: radial-gradient(circle, black 40%, transparent 95%);

}

.glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(140px);

    opacity: .22;

}

.glow-1 {

    background: var(--primary);

    top: -150px;

    left: -100px;

}

.glow-2 {

    background: #4BC8FF;

    bottom: -150px;

    right: -100px;

}

/* AI Graphic */

.hero-graphic {

    position: relative;

    width: 460px;

    height: 460px;

    margin: auto;

}

.orb {

    position: absolute;

    inset: 400px;

    border-radius: 50%;

    background:

        radial-gradient(circle, rgba(216,245,74,.95), rgba(216,245,74,.12));

    filter: blur(10px);

}

.ring {

    position: absolute;

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

    border-radius: 50%;

}

.ring1 {

    inset: 0;

    animation: rotate 24s linear infinite;

}

.ring2 {

    inset: 45px;

    animation: rotateReverse 18s linear infinite;

}

.ring3 {

    inset: 90px;

    animation: rotate 14s linear infinite;

}

.center-dot {

    position: absolute;

    width: 16px;

    height: 16px;

    background: white;

    border-radius: 50%;

    top: 50%;

    left: 50%;

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

    box-shadow: 0 0 30px white;

}

@keyframes rotate {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}

@keyframes rotateReverse {

    from { transform: rotate(360deg); }

    to { transform: rotate(0deg); }

}

@media (max-width:950px){

    .hero-layout{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-text h1{

        font-size:3rem;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-graphic{

        width:320px;

        height:320px;

    }

}