:root{
    --bg:#050816;
    --panel:#0c1026;
    --accent:#00d4ff;
    --accent2:#4da3ff;
    --text:#ffffff;
    --muted:#a0a7c2;
}

*{box-sizing:border-box}

body{
    margin:0;
    background:radial-gradient(circle at top,#0c0f2a,var(--bg));
    color:var(--text);
    font-family:Segoe UI,Arial;
}

/* NAVBAR */
.nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:125px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 60px;
    background:rgba(5,8,22,.65);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.05);
    z-index:100;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.nav-left img{
    height:40px;
}

.nav-left span{
    font-size:18px;
    font-weight:600;
    letter-spacing:1px;
    color:var(--accent2);
}

.nav-right a{
    margin-left:22px;
    font-size:14px;
    text-decoration:none;
    color:var(--muted);
    letter-spacing:1px;
}

.nav-right a:hover{color:var(--accent)}

.nav-right .auth{
    color:var(--accent2);
    font-weight:600;
}

/* HERO */
.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:120px 20px 60px;
}

.hero h1{
    font-size:46px;
    margin-bottom:15px;
}

.hero h1 span{color:var(--accent)}

.hero p{
    max-width:850px;
    margin:auto;
    line-height:1.7;
    color:var(--muted);
    letter-spacing:1.4px;
}

.hero .tag{
    margin-top:18px;
    font-weight:600;
    color:var(--accent);
    letter-spacing:2px;
}

/* SECTIONS */
.section{
    padding:90px 10%;
}

.section h2{
    text-align:center;
    font-size:34px;
    color:var(--accent2);
}

.section .sub{
    text-align:center;
    color:var(--muted);
    margin:15px 0 55px;
}

/* CARDS */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.card{
    background:var(--panel);
    padding:28px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.05);
    position:relative;
    overflow:hidden;
}

.card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent,var(--accent),transparent);
    opacity:0;
    transition:.4s;
}

.card:hover::before{opacity:.08}

.card h3{
    color:var(--accent);
    margin-bottom:10px;
}

.card p{
    font-size:14px;
    color:var(--muted);
    line-height:1.6;
}

/* CTA */
.cta{
    background:linear-gradient(135deg,#0c1026,#050816);
    padding:90px 20px;
    text-align:center;
}

.cta h2{
    font-size:36px;
    color:var(--accent2);
}

.cta p{
    max-width:650px;
    margin:20px auto 30px;
    color:var(--muted);
}

.cta a{
    display:inline-block;
    padding:15px 40px;
    border-radius:40px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#000;
    font-weight:700;
    text-decoration:none;
}

.cta a:hover{opacity:.9}

/* FOOTER */
footer{
    text-align:center;
    padding:28px;
    color:#7d86a3;
    font-size:12px;
    border-top:1px solid rgba(255,255,255,.05);
}

.company-name{
    font-size:28px;
    text-align:center;
    letter-spacing:2px;
    font-weight:600;
}

.company-name span{
    background: linear-gradient(
        90deg,
        #4da3ff,
        #00d4ff,
        #4da3ff
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shine 6s linear infinite, fadeUp 1.2s ease-out forwards;
}

@keyframes shine{
    0%{background-position:0%}
    100%{background-position:300%}
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* RESPONSIVE */
@media(max-width:800px){
    .nav{padding:0 25px}
    .nav-left span{display:none}
}

.grid-3{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.image-card{
    text-align:center;
    padding:35px 28px;
}

.image-card img{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:20px;
    filter:drop-shadow(0 0 12px rgba(0,212,255,.25));
    transition:.4s;
}

.image-card:hover img{
    transform:scale(1.08);
    filter:drop-shadow(0 0 22px rgba(0,212,255,.45));
}

.image-card h3{
    margin-top:10px;
}

.icon-card{
    text-align:center;
    padding:35px 28px;
}

.emoji{
    font-size:46px;
    margin-bottom:18px;
    filter:drop-shadow(0 0 12px rgba(0,212,255,.35));
}

.site-footer{
    border-top:1px solid rgba(255,255,255,.06);
    padding:25px 15px;
    background:#050816;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1200px;
    margin:auto;
    flex-wrap:wrap;
    gap:10px;
}

.footer-inner p{
    margin:0;
    color:#7d86a3;
    font-size:12px;
}

.footer-links a{
    color:#a0a7c2;
    text-decoration:none;
    font-size:12px;
    margin:0 6px;
}

.footer-links a:hover{
    color:#00d4ff;
}

.footer-links span{
    color:#444;
}

/* Mobile */
@media(max-width:600px){
    .footer-inner{
        flex-direction:column;
        text-align:center;
    }
}

.card::before{
    pointer-events: none;
}

.card{
    position: relative;
    z-index: 1;
}

form{
    position: relative;
    z-index: 5;
}

/* ================= BLOG ================= */

.blog-wrapper{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:start;
}

/* Sidebar */
.blog-sidebar{
    background:var(--panel);
    border:1px solid rgba(255,255,255,.05);
    border-radius:16px;
    padding:28px;
    position:sticky;
    top:160px;
}

.blog-sidebar h3{
    font-size:18px;
    margin-bottom:18px;
    color:var(--accent2);
}

.blog-sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}

.blog-sidebar li{
    margin-bottom:12px;
}

.blog-sidebar a{
    color:var(--muted);
    font-size:14px;
    text-decoration:none;
    transition:.3s;
}

.blog-sidebar a:hover{
    color:var(--accent);
    padding-left:6px;
}

/* Blog list */
.blog-list{
    display:grid;
    gap:32px;
}

/* Blog card */
.blog-item{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:26px;
    background:var(--panel);
    border-radius:18px;
    padding:26px;
    border:1px solid rgba(255,255,255,.05);
    transition:.3s;
}

.blog-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(0,212,255,.08);
}

.blog-thumb img{
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:14px;
}

.blog-meta{
    font-size:12px;
    color:var(--muted);
    letter-spacing:1px;
}

.blog-title{
    font-size:22px;
    margin:10px 0 12px;
}

.blog-title a{
    color:#fff;
    text-decoration:none;
}

.blog-title a:hover{
    color:var(--accent);
}

.blog-excerpt{
    font-size:14px;
    line-height:1.7;
    color:var(--muted);
}

.blog-read{
    margin-top:14px;
    display:inline-block;
    color:var(--accent);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
}

/* Mobile */
@media(max-width:900px){
    .blog-wrapper{
        grid-template-columns:1fr;
    }
    .blog-item{
        grid-template-columns:1fr;
    }
}

/* ================= BLOG DETAIL ================= */

.blog-detail{
    max-width:900px;
    margin:auto;
}

.blog-article{
    background:var(--panel);
    border-radius:20px;
    padding:50px;
    border:1px solid rgba(255,255,255,.06);
}

.blog-heading{
    font-size:38px;
    line-height:1.3;
    margin-bottom:14px;
}

.blog-info{
    font-size:13px;
    color:var(--muted);
    margin-bottom:30px;
    letter-spacing:1px;
}

.blog-featured{
    width:100%;
    border-radius:16px;
    margin:30px 0;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}

/* CONTENT TYPOGRAPHY */
.blog-body{
    font-size:16px;
    line-height:1.9;
    color:#dce3ff;
}

.blog-body h2{
    font-size:26px;
    margin:45px 0 18px;
    color:var(--accent2);
}

.blog-body h3{
    font-size:22px;
    margin:35px 0 14px;
    color:var(--accent);
}

.blog-body p{
    margin-bottom:20px;
}

.blog-body ul,
.blog-body ol{
    padding-left:22px;
    margin:20px 0;
}

.blog-body li{
    margin-bottom:10px;
}

.blog-body strong{
    color:#fff;
}

.blog-body code{
    background:#050816;
    padding:4px 8px;
    border-radius:6px;
    font-size:14px;
    color:#00d4ff;
}

.blog-body pre{
    background:#050816;
    padding:20px;
    border-radius:14px;
    overflow-x:auto;
    margin:30px 0;
    border:1px solid rgba(255,255,255,.05);
}

.blog-body a{
    color:var(--accent);
    text-decoration:none;
}

.blog-body a:hover{
    text-decoration:underline;
}

/* Mobile */
@media(max-width:700px){
    .blog-article{
        padding:28px;
    }
    .blog-heading{
        font-size:30px;
    }
}
.blog-detail{
    padding-left:0;
    padding-right:0;
}

.blog-article{
    max-width:960px;
    margin:auto;
}

.blog-detail::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:960px;
    height:100%;
    background:radial-gradient(circle at top,
        rgba(0,212,255,.08),
        transparent 70%);
    pointer-events:none;
}

/* Layout reused from blog index */
.blog-wrapper{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:start;
}

/* Sidebar */
.blog-sidebar{
    background:var(--panel);
    border:1px solid rgba(255,255,255,.05);
    border-radius:16px;
    padding:28px;
    position:sticky;
    top:160px;
}

.blog-sidebar h3{
    font-size:18px;
    margin-bottom:16px;
    color:var(--accent2);
}

.blog-sidebar ul{
    list-style:none;
    padding:0;
}

.blog-sidebar li{
    margin-bottom:10px;
}

.blog-sidebar a{
    color:var(--muted);
    font-size:14px;
    text-decoration:none;
}

.blog-sidebar a:hover{
    color:var(--accent);
}

/* Blog content */
.blog-article{
    background:var(--panel);
    border-radius:20px;
    padding:50px;
    border:1px solid rgba(255,255,255,.06);
}

.blog-heading{
    font-size:38px;
    line-height:1.3;
}

.blog-info{
    font-size:13px;
    color:var(--muted);
    margin-bottom:28px;
}

.blog-featured{
    width:100%;
    border-radius:16px;
    margin:30px 0;
}

/* Typography */
.blog-body{
    font-size:16px;
    line-height:1.9;
    color:#dce3ff;
}

.blog-body h2{
    margin:45px 0 18px;
    font-size:26px;
    color:var(--accent2);
}

.blog-body ul{
    padding-left:22px;
}

/* Mobile */
@media(max-width:900px){
    .blog-wrapper{
        grid-template-columns:1fr;
    }
    .blog-sidebar{
        position:relative;
        top:auto;
    }
    .blog-article{
        padding:28px;
    }
}
/* =========================
   GLOBAL RESPONSIVE FIXES
========================= */

/* Fluid typography */
h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
p  { font-size: clamp(0.95rem, 2.8vw, 1.05rem); }

/* Prevent horizontal scroll */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================
   NAVBAR (Mobile)
========================= */
@media (max-width: 900px) {
    .nav {
        height: auto;
        padding: 14px 20px;
        flex-wrap: wrap;
    }

    .nav-right {
        width: 100%;
        margin-top: 12px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .nav-right a {
        margin: 0;
        font-size: 13px;
    }
}

/* =========================
   HERO
========================= */
@media (max-width: 768px) {
    .hero {
        padding: 120px 16px 60px;
        min-height: auto;
    }

    .hero p {
        letter-spacing: 0.6px;
        line-height: 1.6;
    }
}

/* =========================
   SECTIONS
========================= */
@media (max-width: 768px) {
    .section {
        padding: 60px 20px;
    }

    .section .sub {
        margin-bottom: 35px;
    }
}

/* =========================
   GRID & CARDS
========================= */
@media (max-width: 600px) {
    .grid {
        gap: 20px;
    }

    .card {
        padding: 22px;
    }
}

/* =========================
   CTA
========================= */
@media (max-width: 600px) {
    .cta {
        padding: 60px 18px;
    }

    .cta a {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* =========================
   BLOG
========================= */
@media (max-width: 900px) {
    .blog-wrapper {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: relative;
        top: auto;
    }
}

@media (max-width: 700px) {
    .blog-item {
        grid-template-columns: 1fr;
    }

    .blog-thumb img {
        height: auto;
    }

    .blog-heading {
        font-size: 28px;
    }
}

/* =========================
   FOOTER
========================= */
@media (max-width: 600px) {
    footer {
        font-size: 11px;
        padding: 22px 12px;
    }
}