/* ==========================================================
   Flipper Zero Downloads
   Global Styles
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');

:root{

    --bg:#090909;
    --bg-secondary:#111111;
    --surface:#171717;
    --surface-hover:#1f1f1f;

    --border:#2b2b2b;

    --text:#f5f5f5;
    --muted:#b4b4b4;

    --accent:#ff8c00;
    --accent-light:#ffb347;

    --success:#2ecc71;
    --danger:#ff5555;

    --shadow:0 15px 45px rgba(0,0,0,.35);

    --radius:18px;

    --transition:.25s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"JetBrains Mono",monospace;

background:
radial-gradient(circle at top,#181818,#090909 70%);

color:var(--text);

line-height:1.75;

min-height:100vh;

}

img{

display:block;

max-width:100%;

}

a{

color:inherit;

text-decoration:none;

}

button{

font-family:inherit;

cursor:pointer;

}

section{

padding:90px 8%;

}

.container{

max-width:1450px;

margin:auto;

}

/* =======================
        NAVBAR
======================= */

header{

position:fixed;

top:0;

left:0;

right:0;

z-index:9999;

backdrop-filter:blur(18px);

background:rgba(10,10,10,.75);

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

}

nav{

max-width:1500px;

margin:auto;

height:72px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

}

.logo{

font-size:22px;

font-weight:700;

letter-spacing:.5px;

}

.logo span{

color:var(--accent);

}

.nav-links{

display:flex;

gap:30px;

list-style:none;

}

.nav-links a{

color:var(--muted);

transition:var(--transition);

font-size:15px;

}

.nav-links a:hover{

color:white;

}

.nav-links a.active{

color:var(--accent);

}

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

.hero{

padding-top:170px;

padding-bottom:120px;

text-align:center;

}

.hero h1{

font-size:4.5rem;

font-weight:800;

margin-bottom:25px;

}

.hero p{

max-width:850px;

margin:auto;

font-size:18px;

color:var(--muted);

}

.hero-buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:14px;

transition:var(--transition);

font-weight:700;

}

.btn-primary{

background:linear-gradient(
135deg,
var(--accent),
var(--accent-light)
);

color:#111;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(255,140,0,.2);

}

.btn-secondary{

background:var(--surface);

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

}

.btn-secondary:hover{

background:var(--surface-hover);

}

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

.grid{

display:grid;

gap:25px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.card{

background:rgba(255,255,255,.035);

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

border-radius:var(--radius);

padding:30px;

transition:var(--transition);

backdrop-filter:blur(12px);

}

.card:hover{

transform:translateY(-5px);

border-color:var(--accent);

box-shadow:var(--shadow);

}

.card h3{

margin-bottom:14px;

}

.card p{

color:var(--muted);

}

/* =======================
       SECTION TITLE
======================= */

.section-title{

font-size:2.5rem;

margin-bottom:15px;

}

.section-description{

max-width:900px;

color:var(--muted);

margin-bottom:45px;

}

/* =======================
    DOCUMENTATION GRID
======================= */

.doc-grid{

display:grid;

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

gap:20px;

margin-bottom:45px;

}

.doc-card{

background:rgba(255,255,255,.04);

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

border-radius:16px;

padding:24px;

transition:var(--transition);

cursor:pointer;

}

.doc-card:hover{

border-color:var(--accent);

transform:translateY(-4px);

}

.doc-card.active{

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

border-color:var(--accent);

}

.doc-card h3{

margin-bottom:10px;

}

.doc-card p{

font-size:14px;

color:var(--muted);

}

/* =======================
    DOCUMENT VIEWER
======================= */

#viewer{

background:#101010;

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

border-radius:20px;

padding:45px;

min-height:700px;

overflow-x:auto;

box-shadow:var(--shadow);

}

#viewer img{

border-radius:16px;

margin:25px auto;

}

#viewer h1{

font-size:2.4rem;

margin-bottom:20px;

padding-bottom:15px;

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

}

#viewer h2{

margin-top:40px;

margin-bottom:18px;

}

#viewer h3{

margin-top:30px;

margin-bottom:12px;

}

#viewer p{

margin:14px 0;

}

#viewer ul,
#viewer ol{

margin-left:25px;

margin-top:15px;

margin-bottom:15px;

}

#viewer table{

width:100%;

border-collapse:collapse;

margin:30px 0;

}

#viewer td,
#viewer th{

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

padding:12px;

}

#viewer pre{

background:#0b0b0b;

padding:20px;

border-radius:14px;

overflow:auto;

margin:25px 0;

}

#viewer code{

font-family:inherit;

}

#viewer blockquote{

border-left:4px solid var(--accent);

padding-left:18px;

margin:25px 0;

color:#ddd;

}

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

footer{

margin-top:100px;

padding:60px 8%;

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

text-align:center;

color:var(--muted);

}
/* =======================
      Images
======================= */

.center-block {
   
  display: block;
   
  margin-left: auto;
   
  margin-right: auto;
   
  max-width: 100%; 
   
  height: auto;
   
}

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

@media(max-width:900px){

.hero h1{

font-size:3rem;

}

.nav-links{

display:none;

}

section{

padding:70px 6%;

}

.grid-2{

grid-template-columns:1fr;

}

#viewer{

padding:25px;

}
   
}