:root{
 --primary:#2563eb;
 --primary-dark:#1d4ed8;
 --bg:#f8fafc;
 --card:#ffffff;
 --border:#e5e7eb;
 --muted:#64748b;
 --radius:18px;
}

*{box-sizing:border-box}

body{
 margin:0;
 font-family:Inter,system-ui,sans-serif;
 background:var(--bg);
 color:#0f172a;
 -webkit-font-smoothing:antialiased;
}


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

.hero-text{
 text-align:center;
 max-width:900px;
 margin:80px auto 40px;
 padding:0 16px;
 font-size:30px;
 font-weight:800;
 line-height:1.1;
 color:#1f2937;
}

@media(max-width:900px){
 .hero-text{
   font-size:40px;
   margin:60px auto 30px;
 }
}

@media(max-width:600px){
 .hero-text{
   font-size:30px;
   margin:44px auto 24px;
 }
}


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

.site-header{
 background:var(--bg);
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:50;
}

/* center only layout */
.header-inner{
 max-width:1100px;
 margin:auto;
 padding:22px 16px;
 text-align:center;
}

/* center title */
.logo-text{
 font-weight:800;
 font-size:26px;
 color:#000;
 text-decoration:none;
 text-underline-offset:6px;
 letter-spacing:.3px;
}

/* hover link feel */
.logo-text:hover{
 opacity:.75;
}

@media(max-width:700px){
 .logo-text{
   font-size:20px;
 }
}




/* Upload big box style */
.upload-hero{
 max-width:550px;
 height:200px;
 margin:70px auto;
 padding:0 16px;
 position:relative;
}


.browse-link{
 color:var(--primary);
 text-decoration:underline;
 cursor:pointer;
}


.upload-hero input{
 position:absolute;
 inset:0;
 opacity:0;
 cursor:pointer;
 z-index:5;
}

.upload-box{
 background:#fff;
 border:2px dashed #cbd5f1;
 border-radius:18px;
 padding:46px 24px;   /* ↓ reduced size */
 text-align:center;
 transition:.25s;
 box-shadow:0 12px 30px rgba(0,0,0,.05);
 font-size:16px;
 font-weight:600;
 color:var(--muted);
}



.upload-hero:hover .upload-box{
 border-color:var(--primary);
 background:#f8fbff;
 color:var(--primary);
}
@media(max-width:600px){
 .upload-box{
   padding:34px 18px;
   font-size:15px;
 }
}




/* ===== App ===== */
.app{
 max-width:1000px;
 margin:30px auto;
 padding:0 16px;
 animation:fadeIn .35s ease;
}

@keyframes fadeIn{
 from{opacity:0; transform:translateY(8px)}
 to{opacity:1; transform:none}
}

/* ===== Video ===== */
.video-box{
 border-radius:var(--radius);
 overflow:hidden;
 background:#000;
 box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.video-box video{
 width:100%;
 display:block;
}

/* ===== Settings ===== */
.settings{
 background:var(--card);
 margin-top:18px;
 padding:18px;
 border-radius:16px;
 display:grid;
 grid-template-columns:1fr 1fr 1fr;   /* ✅ equal width */
 gap:14px;
 align-items:end;
}

.settings label{
 font-size:13px;
 color:var(--muted);
 display:block;
 margin-bottom:6px;
 font-weight:600;
}

.settings input{
 width:100%;
 padding:12px;
 border-radius:12px;
 border:1px solid var(--border);
 font-size:15px;
 background:#fff;
}

.settings input:focus{
 outline:none;
 border-color:var(--primary);
}

.settings button{
 background:var(--primary);
 color:#fff;
 border:none;
 border-radius:14px;
 padding:13px 22px;      /* bigger button */
 font-weight:700;
 font-size:15px;         /* 👈 text bigger */
 cursor:pointer;
 box-shadow:0 8px 18px rgba(37,99,235,.25);
}

@media(max-width:600px){
 .settings button{
   font-size:16px;
   padding:14px 20px;
 }
}


.settings button:hover{
 background:var(--primary-dark);
}






/* ===== Floating Download Button ===== */
.download-all{
 display:none;
 position:fixed;
 right:28px;
 bottom:28px;
 z-index:999;

 padding:18px 28px;
 font-size:16px;
 font-weight:800;

 background:var(--primary);
 color:#fff;
 border:none;
 border-radius:18px;
 cursor:pointer;

 box-shadow:0 16px 36px rgba(0,0,0,.28);
 transition:.2s;
}

.download-all:hover{
 background:var(--primary-dark);
 transform:translateY(-2px);
}


@media(max-width:700px){

 .download-all{
   right:auto;
   width:92%;
   max-width:420px;
   justify-content:center;
   padding:16px;
   font-size:15px;
   border-radius:20px;
 }
}







/* ===== Frames Grid ===== */
.frames{
 max-width:1200px;
 margin:40px auto;
 padding:0 16px;
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:22px;
}

.frame{
 background:var(--card);
 border-radius:16px;
 border:1px solid var(--border);
 overflow:hidden;
 box-shadow:0 8px 20px rgba(0,0,0,.05);
 transition:.25s;
}

.frame:hover{
 transform:translateY(-4px);
}

.frame img{
 width:100%;
 display:block;
}

.frame-footer{
 padding:12px 14px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:13px;
}

.frame-footer button{
 padding:8px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:#f1f5f9;
 cursor:pointer;
 font-weight:600;
}

.frame-footer button:hover{
 background:#e2e8f0;
}

/* ===== Footer ===== */
.site-footer{
 border-top:1px solid var(--border);
 margin-top:70px;
 background:var(--bg);
}

.footer-inner{
 max-width:1100px;
 margin:auto;
 padding:22px 16px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:14px;
}

.footer-left{
 font-size:14px;
 color:var(--muted);
}

.footer-right a{
 margin-left:16px;
 font-size:14px;
 color:var(--muted);
 text-decoration:none;
}

.footer-right a:hover{
 color:var(--primary);
}

/* ===== Static Pages ===== */
.page{
 max-width:820px;
 margin:60px auto;
 padding:0 16px;
}

.page h1{
 margin-bottom:16px;
}

.page p{
 line-height:1.75;
 color:var(--muted);
}

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

@media (max-width:800px){

 .header-inner{
   flex-direction:column;
   align-items:flex-start;
 }

 .nav{
   display:flex;
   gap:14px;
 }

 .nav a{
   margin-left:0;
 }

 .upload-card{
   margin:30px 14px;
   padding:28px 18px;
 }

 .settings{
   grid-template-columns:1fr;
 }

 .settings button{
   width:100%;
 }

 .frames{
   grid-template-columns:1fr;
 }

 .footer-inner{
   flex-direction:column;
   text-align:center;
 }

 .footer-right{
   order:1;
 }

 .footer-left{
   order:2;
 }

 .footer-right a{
   margin:0 8px;
 }
}





.seo-text{
 max-width:900px;
 margin:40px auto;
 padding:0 16px;
 color:#64748b;
 font-size:14px;
 line-height:1.7;
}

/* ===== LOGO + TEXT ===== */

.logo-wrap{
 display:flex;
 align-items:center;
 gap:10px;
 text-decoration:none;
 justify-content:center;
 width:100%;
}

.logo-wrap img{
 width:32px;     /* logo size */
 height:32px;
 object-fit:contain;
}

.logo-wrap span{
 font-size:22px;
 font-weight:800;
 color:#000;
 letter-spacing:.3px;
}