/* ==========================================================
   Mock Paper Hub
   Main Stylesheet
   ========================================================== */


/* =========================
   RESET & GLOBAL STYLES
   ========================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #0f172a;
    color: #f8fafc;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


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

.header {

    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,0.08);

}


.header-container {

    height: 80px;

    display: flex;
    justify-content: space-between;
    align-items: center;

}


.logo {

    display: flex;
    align-items: center;
    gap: 12px;

}


.logo h2 {

    font-size: 1.25rem;
    color: white;

}


.logo span {

    display: block;
    font-size: .75rem;
    color: #94a3b8;

}


.nav {

    display: flex;
    gap: 30px;

}


.nav a {

    color: #cbd5e1;
    font-weight: 500;
    transition: .3s;

}


.nav a:hover {

    color: #818cf8;

}


.menu-toggle {

    display: none;

    background: transparent;
    border: none;

    color: white;
    font-size: 28px;

    cursor: pointer;

}



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

.btn {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    padding: 13px 28px;

    border-radius: 12px;

    font-weight: 600;

    transition: .3s;

    cursor: pointer;

}


.btn-primary {

    background: linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

    color:white;

}


.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
    0 10px 30px rgba(99,102,241,.35);

}


.btn-secondary {

    border:1px solid #6366f1;

    color:white;

}


.btn-secondary:hover {

    background:#6366f1;

}



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

.hero {

    padding:90px 0;

}


.hero-container {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:50px;

}


.hero-tag {

    display:inline-block;

    padding:7px 15px;

    background:
    rgba(99,102,241,.15);

    color:#a5b4fc;

    border-radius:20px;

    font-size:.85rem;

    margin-bottom:20px;

}


.hero h1 {

    font-size:3.5rem;

    line-height:1.15;

    margin-bottom:20px;

}


.hero p {

    color:#cbd5e1;

    max-width:500px;

    font-size:1.1rem;

    margin-bottom:35px;

}


.hero-buttons {

    display:flex;

    gap:15px;

}


.hero-image svg {

    width:100%;

}



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

.section {

    padding:80px 0;

}


.section-title {

    text-align:center;

    font-size:2.2rem;

    margin-bottom:10px;

}


.section-description {

    text-align:center;

    color:#94a3b8;

    margin-bottom:40px;

}



/* =========================
   STATISTICS
   ========================= */

.stats {

    padding:20px 0 60px;

}


.stats-grid {

    display:grid;

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

    gap:20px;

}


.stat-card {

    padding:30px;

    text-align:center;

    border-radius:18px;

    background:#1e293b;

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

}


.stat-card h2 {

    font-size:2rem;

    color:#818cf8;

}


.stat-card p {

    color:#cbd5e1;

}



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

.paper-grid {

    display:grid;

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

    gap:25px;

}


.paper-card {

    position:relative;

    padding:30px;

    border-radius:20px;

    background:#1e293b;

    border:

    1px solid rgba(255,255,255,.08);

    transition:.3s;

}


.paper-card:hover {

    transform:translateY(-8px);

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

}


.paper-icon {

    font-size:40px;

    margin-bottom:15px;

}


.paper-card h3 {

    margin-bottom:15px;

    font-size:1.3rem;

}


.paper-card p {

    color:#cbd5e1;

    font-size:.95rem;

}


.paper-info {

    list-style:none;

    margin:20px 0;

}


.paper-info li {

    margin-bottom:8px;

    color:#cbd5e1;

}



.badge {

    position:absolute;

    top:20px;
    right:20px;

    padding:5px 12px;

    border-radius:20px;

    font-size:.75rem;

    font-weight:600;

}


.available {

    background:#166534;

    color:#bbf7d0;

}


.coming {

    background:#334155;

    color:#cbd5e1;

}


.disabled {

    opacity:.55;

}


.disabled button {

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#334155;

    color:#94a3b8;

}



/* =========================
   HOW IT WORKS
   ========================= */


.steps {

    display:grid;

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

    gap:30px;

    text-align:center;

}


.circle {

    width:70px;

    height:70px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #6366f1,
    #8b5cf6);

    font-size:1.5rem;

    font-weight:bold;

    margin-bottom:20px;

}



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


.feature-grid {

    display:grid;

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

    gap:20px;

}


.feature {

    padding:25px;

    border-radius:15px;

    background:#1e293b;

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

    text-align:center;

}



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


.about-text {

    max-width:800px;

    margin:auto;

    text-align:center;

    color:#cbd5e1;

    font-size:1.1rem;

}



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


.contact {

    text-align:center;

}


.contact p {

    margin-bottom:10px;

    color:#cbd5e1;

}



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


footer {

    padding:30px 0;

    text-align:center;

    background:#020617;

    border-top:1px solid rgba(255,255,255,.08);

}


footer p {

    color:#94a3b8;

    margin:8px;

}


footer a {

    color:#818cf8;

}



/* =========================
   ANIMATION
   ========================= */


.reveal {

    opacity:0;

    transform:translateY(30px);

    transition:.6s ease;

}


.reveal.active {

    opacity:1;

    transform:none;

}



/* =========================
   FOCUS STATES
   ========================= */


a:focus,
button:focus {

    outline:3px solid #818cf8;

    outline-offset:3px;

}



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


@media(max-width:900px){


.hero-container {

    grid-template-columns:1fr;

    text-align:center;

}


.hero p {

    margin-left:auto;
    margin-right:auto;

}


.hero-buttons {

    justify-content:center;

}


.stats-grid {

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

}


.paper-grid {

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

}


.feature-grid {

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

}


}



@media(max-width:700px){


.header-container {

    height:70px;

}


.menu-toggle {

    display:block;

}


.nav {

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:#0f172a;

    flex-direction:column;

    align-items:center;

    padding:25px;

    display:none;

}


.nav.active {

    display:flex;

}


.hero {

    padding:60px 0;

}


.hero h1 {

    font-size:2.4rem;

}


.hero-buttons {

    flex-direction:column;

}


.btn {

    width:100%;

}


.stats-grid,
.paper-grid,
.steps,
.feature-grid {

    grid-template-columns:1fr;

}


.section {

    padding:60px 0;

}



.logo h2 {

    font-size:1rem;

}


}


@media(max-width:400px){


.hero h1 {

    font-size:2rem;

}


.container {

    width:92%;

}


}