/* ==========================================
   i3DViewer - Professional Landing Page
========================================== */

:root{

    --primary:#ff6a00;
    --primary-dark:#e85d00;
    --dark:#111111;
    --text:#555;
    --light:#ffffff;
    --section:#f8f9fb;
    --border:#ececec;
    --shadow:0 20px 50px rgba(0,0,0,.08);

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:#fff;
    color:var(--dark);
    line-height:1.7;
    overflow-x:hidden;

}

.container{

    width:100%;
    max-width:1850px;
    margin:auto;
    Padding:0px;

}

/* =======================
Navigation
======================= */

nav{

    width:100%;
    position:fixed;
    z-index:1000;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);

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

}

.nav{

    display:flex;
    align-items:center;
    justify-content:space-between;
    height:60px;
    width:100%;

}

.logo{

    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;

}

.logo img{

    width:42px;
    height:42px;

}

.logo-text{

    font-family:'Space Grotesk', sans-serif;
    font-size:30px;
    font-weight:700;
    letter-spacing:-0.8px;
    line-height:1;
    color:#111;
    white-space:nowrap;

}

.logo-highlight{

    color:#FF6A00;

}

.logo img{

    width:42px;
    height:42px;

}

/* =======================
Buttons
======================= */

.btn{

    display:inline-block;

    padding:10px 32px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(255,106,0,.35);

}

.btn-outline{

    display:inline-block;

    padding:14px 34px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/* =======================
Hero
======================= */

.hero{

    padding-top:170px;
    padding-bottom:120px;

    text-align:center;

    background:
    radial-gradient(circle at top,#fff4eb 0%,#ffffff 70%);

}

.hero h1{

    font-size:64px;
    font-weight:800;
    line-height:1.15;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    max-width:760px;

    margin:35px auto;

    font-size:22px;

    color:var(--text);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

}

/* =======================
Stats
======================= */

.stats{

    padding:80px 0;

    background:var(--section);

}

.stats-grid{

    display:grid;

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

    gap:25px;

}

.stats-grid div{

    background:#fff;

    padding:35px;

    border-radius:18px;

    text-align:center;

    box-shadow:var(--shadow);

}

.stats-grid h2{

    font-size:42px;

    color:var(--primary);

}

/* =======================
Sections
======================= */

section{

    padding:100px 0;

}

.section-title{

    text-align:center;

    font-size:42px;

    margin-bottom:70px;

}

/* =======================
Feature Cards
======================= */

.features{

    display:grid;

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

    gap:30px;

}

.card{

    background:#fff;

    border-radius:22px;

    padding:40px;

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

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.card h3{

    margin-bottom:18px;

    font-size:24px;

}

.card p{

    color:var(--text);

}

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

.cta{

    text-align:center;

    background:

    linear-gradient(135deg,#ff6a00,#ff8f2d);

    color:#fff;

}

.cta h2{

    font-size:48px;

    margin-bottom:20px;

}

.cta p{

    font-size:20px;

    margin-bottom:40px;

}

.cta .btn{

    background:#fff;

    color:var(--primary);

}

.cta .btn:hover{

    background:#f4f4f4;

}

/* =======================
Footer
======================= */

footer{

    background:#111;

    color:#fff;

    text-align:center;

    padding:15px 20px;

}

/* =======================
Simple Animation
======================= */

.card,
.stats-grid div,
.hero h1,
.hero p,
.hero-buttons{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ==========================================
   Premium Hero Background
========================================== */

.hero{
    position:relative;
    overflow:hidden;
}

/* Animated Gradient Blobs */

.hero::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    background:radial-gradient(circle,
    rgba(255,106,0,.18),
    transparent 70%);

    top:-250px;
    left:-180px;

    animation:blob1 12s ease-in-out infinite;

}

.hero::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:radial-gradient(circle,
    rgba(255,166,0,.15),
    transparent 70%);

    right:-150px;
    bottom:-200px;

    animation:blob2 14s ease-in-out infinite;

}

.hero-content{

    position:relative;
    z-index:10;

}

/* Floating Shapes */

.shape{

    position:absolute;

    border-radius:50%;

    background:rgba(255,106,0,.08);

    backdrop-filter:blur(10px);

    animation:float 8s ease-in-out infinite;

}

.shape1{

    width:90px;
    height:90px;

    top:140px;
    left:8%;

}

.shape2{

    width:60px;
    height:60px;

    top:260px;
    right:12%;

    animation-delay:2s;

}

.shape3{

    width:130px;
    height:130px;

    bottom:60px;
    left:18%;

    animation-delay:4s;

}

.shape4{

    width:45px;
    height:45px;

    right:28%;
    top:130px;

    animation-delay:6s;

}

/* Glass Effect */

.card{

    backdrop-filter:blur(18px);

}

.card:hover{

    box-shadow:
    0 25px 60px rgba(255,106,0,.15);

}

/* Button Glow */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.4),
    transparent);

    transition:.8s;

}

.btn:hover::before{

    left:120%;

}

/* Gradient Text */

.hero span{

    background:
    linear-gradient(
    90deg,
    #ff6a00,
    #ff9800);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* Animations */

@keyframes float{

    0%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-25px);

    }

    100%{

        transform:
        translateY(0px);

    }

}

@keyframes blob1{

    0%{

        transform:
        translate(0,0);

    }

    50%{

        transform:
        translate(60px,30px);

    }

    100%{

        transform:
        translate(0,0);

    }

}

@keyframes blob2{

    0%{

        transform:
        translate(0,0);

    }

    50%{

        transform:
        translate(-60px,-30px);

    }

    100%{

        transform:
        translate(0,0);

    }

}

/* ==========================================
Why Section
========================================== */

.section-subtitle{

    max-width:800px;

    margin:0 auto 60px;

    text-align:center;

    color:#666;

    font-size:20px;

}

.why{

    background:#fafafa;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    border:1px solid #ececec;

    transition:.35s;

    text-align:center;

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:#ff6a00;

    box-shadow:0 20px 50px rgba(255,106,0,.15);

}

.why-icon{

    width:80px;
    height:80px;

    border-radius:50%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff4eb;

    font-size:36px;

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.why-card p{

    color:#666;

}

/* ==========================================
FAQ
========================================== */

.faq{

    background:#fff;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#fff;

    margin-bottom:20px;

    border-radius:18px;

    border:1px solid #ececec;

    overflow:hidden;

    transition:.3s;

}

.faq-item:hover{

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.faq-question{

    width:100%;

    padding:25px;

    border:none;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

}

.faq-question span{

    font-size:28px;

    color:#ff6a00;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 25px 25px;

    color:#666;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

/* ==========================================
   Live Viewer Counter
========================================== */

.live-counter{

    padding:70px 0;

    background:#f8f9fb;

}

.live-counter-box{

    max-width:900px;

    margin:auto;

    padding:55px 30px;

    text-align:center;

    background:#ffffff;

    border:1px solid #eeeeee;

    border-radius:28px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.live-label{

    display:inline-block;

    margin-bottom:12px;

    font-size:16px;

    font-weight:600;

    color:#555;

}

.live-dot{

    display:inline-block;

    width:9px;

    height:9px;

    margin-right:7px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 0 5px rgba(34,197,94,.12);

    animation:livePulse 1.8s infinite;

}

#viewerCount{

    margin:5px 0 0;

    font-family:'Space Grotesk', sans-serif;

    font-size:64px;

    font-weight:700;

    line-height:1.1;

    color:#ff6a00;

}

.live-counter-box p{

    margin-top:8px;

    font-size:18px;

    color:#555;

}

@keyframes livePulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.4);

    }

    70%{

        box-shadow:0 0 0 8px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

@media(max-width:600px){

    .live-counter{

        padding:50px 0;

    }

    .live-counter-box{

        padding:40px 20px;

    }

    #viewerCount{

        font-size:48px;

    }

}