/* ===========================================
 Infragram - Complete Styles
 =========================================== */
/* ===========================================
 1. Reset & Variables
 =========================================== */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}
:root{
 --primary:#a855f7;
 --primary-dark:#9333ea;
 --pink:#ec4899;
 --background:#0a0a0a;
 --surface:rgba(26, 26, 26, 0.8);
 --text:#e9d5ff;
 --text-muted:#9ca3af;
 --border:rgba(168, 85, 247, 0.2);
 --border-solid:#2d2d2d;
}
/* ===========================================
 2. Base Styles
 =========================================== */
body{
 font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 line-height:1.6;
 color:var(--text);
 background:linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #0f0f0f 100%);
 min-height:100vh;
 overflow-x:hidden;
}
h1{
 font-size:2rem;
 font-weight:700;
}
/* ===========================================
 3. Background Orbs
 =========================================== */
.background-orbs{
 position:fixed;
 inset:0;
 overflow:hidden;
 pointer-events:none;
 z-index:0;
}
.orb{
 position:absolute;
 border-radius:50%;
 filter:blur(80px);
 opacity:0.4;
 animation:float 8s ease-in-out infinite;
}
.orb-1{
 width:500px;
 height:500px;
 background:linear-gradient(135deg, #a855f7, #ec4899);
 top:-15%;
 left:-10%;
}
.orb-2{
 width:400px;
 height:400px;
 background:linear-gradient(135deg, #7c3aed, #a855f7);
 bottom:10%;
 right:-10%;
 animation-delay:-4s;
}
.orb-3{
 width:300px;
 height:300px;
 background:linear-gradient(135deg, #ec4899, #f472b6);
 top:40%;
 left:30%;
 animation-delay:-2s;
}
.orb-4{
 width:250px;
 height:250px;
 background:linear-gradient(135deg, #8b5cf6, #a855f7);
 top:60%;
 right:20%;
 animation-delay:-6s;
}
@keyframes float{
 0%, 100%{transform:translateY(0) rotate(0deg)}
 50%{transform:translateY(-30px) rotate(5deg)}
}
/* ===========================================
 4. Header
 =========================================== */
header{
 background:var(--surface);
 backdrop-filter:blur(20px);
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:100;
}
.header-container{
 max-width:1200px;
 margin:0 auto;
 padding:1rem 2rem;
 display:flex;
 justify-content:space-between;
 align-items:center;
}
.logo{
 display:flex;
 align-items:center;
 text-decoration:none;
}
.logo img{
 height:36px;
 width:auto;
}
nav{
 display:flex;
 gap:2rem;
 align-items:center;
}
.nav-links{
 display:flex;
 gap:2rem;
 list-style:none;
}
.nav-links a{
 text-decoration:none;
 color:var(--text-muted);
 font-weight:500;
 transition:color 0.2s;
}
.nav-links a:hover{
 color:var(--primary);
}
/* ===========================================
 5. Buttons
 =========================================== */
.btn{
 padding:0.75rem 1.5rem;
 border-radius:12px;
 font-weight:600;
 text-decoration:none;
 cursor:pointer;
 transition:all 0.2s;
 border:none;
 font-size:1rem;
 display:inline-flex;
 align-items:center;
 justify-content:center;
}
.btn-primary{
 background:linear-gradient(135deg, var(--primary), var(--pink));
 color:white;
 box-shadow:0 4px 15px rgba(168, 85, 247, 0.4);
}
.btn-primary:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(168, 85, 247, 0.5);
}
.btn-primary:disabled{
 opacity:0.6;
 cursor:not-allowed;
 transform:none;
}
.btn-secondary{
 background:rgba(45, 45, 45, 0.6);
 color:var(--text);
 border:1px solid var(--border-solid);
}
.btn-secondary:hover{
 background:rgba(45, 45, 45, 0.8);
 border-color:var(--primary);
}
/* ===========================================
 6. Main Content
 =========================================== */
main{
 position:relative;
 z-index:1;
}
/* ===========================================
 7. Footer
 =========================================== */
footer{
 background:rgba(10, 10, 10, 0.8);
 backdrop-filter:blur(20px);
 color:var(--text);
 padding:3rem 2rem;
 margin-top:5rem;
 border-top:1px solid var(--border);
 position:relative;
 z-index:1;
}
.footer-container{
 max-width:1200px;
 margin:0 auto;
 display:flex;
 justify-content:space-between;
 align-items:center;
}
.footer-logo{
 font-size:1.25rem;
 font-weight:800;
 background:linear-gradient(135deg, var(--primary), var(--pink));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.footer-links{
 display:flex;
 gap:2rem;
}
.footer-links a{
 color:var(--text-muted);
 text-decoration:none;
 transition:color 0.2s;
}
.footer-links a:hover{
 color:var(--primary);
}
/* ===========================================
 8. Hero Section (Index)
 =========================================== */
.hero{
 padding:6rem 2rem;
 text-align:center;
 min-height:500px;
}
.hero h1{
 font-size:3.5rem;
 font-weight:800;
 margin-bottom:1.5rem;
 color:var(--text);
 line-height:1.2;
}
.hero h1 span{
 background:linear-gradient(135deg, var(--primary), var(--pink));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.hero p{
 font-size:1.25rem;
 color:var(--text-muted);
 max-width:600px;
 margin:0 auto 3rem;
}
/* ===========================================
 9. Prompt Form (Index)
 =========================================== */
.prompt-form{
 max-width:700px;
 margin:0 auto;
 background:var(--surface);
 backdrop-filter:blur(20px);
 border-radius:24px;
 padding:2rem;
 border:1px solid var(--border);
 box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 100px rgba(168, 85, 247, 0.1);
}
.prompt-form label{
 display:block;
 text-align:left;
 font-weight:600;
 margin-bottom:0.75rem;
 color:#c084fc;
}
.prompt-input{
 width:100%;
 padding:1rem;
 background:rgba(45, 45, 45, 0.6);
 border:2px solid var(--border-solid);
 border-radius:12px;
 font-size:1rem;
 color:var(--text);
 resize:vertical;
 min-height:120px;
 font-family:inherit;
 transition:all 0.2s;
}
.prompt-input:focus{
 outline:none;
 border-color:var(--primary);
 box-shadow:0 0 0 3px rgba(168, 85, 247, 0.2);
}
.prompt-input::placeholder{
 color:var(--text-muted);
}
.generate-btn{
 margin-top:1rem;
 width:100%;
 padding:1rem;
 font-size:1.125rem;
}
.example-prompts{
 margin-top:1.5rem;
 text-align:left;
}
.example-prompts p{
 font-size:0.875rem;
 color:var(--text-muted);
 margin-bottom:0.75rem;
}
.example-chips{
 display:flex;
 flex-wrap:wrap;
 gap:0.5rem;
}
.example-chip{
 background:rgba(45, 45, 45, 0.6);
 border:1px solid var(--border-solid);
 padding:0.5rem 1rem;
 border-radius:2rem;
 font-size:0.875rem;
 color:var(--text-muted);
 cursor:pointer;
 transition:all 0.2s;
 text-decoration:none;
 display:inline-block;
}
.example-chip:hover{
 background:linear-gradient(135deg, var(--primary), var(--pink));
 color:white;
 border-color:transparent;
 transform:translateY(-1px);
}
/* ===========================================
 10. Tabs Section (Index)
 =========================================== */
.tabs-section{
 max-width:1200px;
 margin:0 auto;
 padding:5rem 2rem;
}
.tabs{
 display:flex;
 justify-content:center;
 gap:0.5rem;
 margin-bottom:3rem;
 background:rgba(45, 45, 45, 0.5);
 backdrop-filter:blur(10px);
 padding:6px;
 border-radius:16px;
 width:fit-content;
 margin-left:auto;
 margin-right:auto;
}
.tab-btn{
 padding:0.875rem 2rem;
 background:transparent;
 border:none;
 font-size:1rem;
 font-weight:600;
 color:var(--text-muted);
 cursor:pointer;
 border-radius:12px;
 transition:all 0.2s;
}
.tab-btn:hover{
 color:var(--text);
}
.tab-btn.active{
 background:linear-gradient(135deg, var(--primary), var(--primary-dark));
 color:white;
 box-shadow:0 4px 12px rgba(168, 85, 247, 0.4);
}
.tab-content{
 display:none;
}
.tab-content.active{
 display:block;
 animation:fadeIn 0.3s ease;
}
@keyframes fadeIn{
 from{opacity:0;transform:translateY(10px)}
 to{opacity:1;transform:translateY(0)}
}
/* ===========================================
 11. Features Grid (Index)
 =========================================== */
.features-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
 gap:1.5rem;
}
.feature-card{
 background:var(--surface);
 backdrop-filter:blur(20px);
 padding:2rem;
 border-radius:20px;
 border:1px solid var(--border);
 transition:all 0.3s;
}
.feature-card:hover{
 transform:translateY(-5px);
 box-shadow:0 20px 40px rgba(0, 0, 0, 0.3), 0 0 60px rgba(168, 85, 247, 0.1);
 border-color:var(--primary);
}
.feature-icon{
 width:56px;
 height:56px;
 background:linear-gradient(135deg, var(--primary), var(--pink));
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-bottom:1.25rem;
 font-size:1.5rem;
 color:white;
}
.feature-card h3{
 font-size:1.25rem;
 margin-bottom:0.75rem;
 color:var(--text);
}
.feature-card p{
 color:var(--text-muted);
 line-height:1.7;
}
/* ===========================================
 12. Pricing Grid (Index)
 =========================================== */
.pricing-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:1.5rem;
 max-width:1000px;
 margin:0 auto;
}
.pricing-card{
 background:var(--surface);
 backdrop-filter:blur(20px);
 padding:2.5rem;
 border-radius:24px;
 border:1px solid var(--border);
 text-align:center;
 transition:all 0.3s;
}
.pricing-card:hover{
 transform:translateY(-5px);
}
.pricing-card.featured{
 border:2px solid var(--primary);
 position:relative;
 box-shadow:0 0 60px rgba(168, 85, 247, 0.2);
}
.pricing-card.featured::before{
 content:'Most Popular';
 position:absolute;
 top:-14px;
 left:50%;
 transform:translateX(-50%);
 background:linear-gradient(135deg, var(--primary), var(--pink));
 color:white;
 padding:0.375rem 1.25rem;
 border-radius:2rem;
 font-size:0.875rem;
 font-weight:600;
}
.pricing-card h3{
 font-size:1.5rem;
 margin-bottom:0.5rem;
 color:var(--text);
}
.pricing-card .price{
 font-size:3.5rem;
 font-weight:800;
 background:linear-gradient(135deg, var(--text), #c084fc);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 margin:1rem 0;
}
.pricing-card .price span{
 font-size:1rem;
 font-weight:400;
 -webkit-text-fill-color:var(--text-muted);
}
.pricing-card ul{
 list-style:none;
 text-align:left;
 margin:2rem 0;
}
.pricing-card li{
 padding:0.625rem 0;
 color:var(--text-muted);
 display:flex;
 align-items:center;
 gap:0.75rem;
}
.pricing-card li::before{
 content:'\2713';
 width:20px;
 height:20px;
 background:linear-gradient(135deg, var(--primary), var(--pink));
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 color:white;
 font-size:12px;
 font-weight:bold;
 flex-shrink:0;
}
.pricing-card .btn{
 width:100%;
 padding:1rem;
}
/* ===========================================
 13. Steps (Index)
 =========================================== */
.steps{
 display:flex;
 flex-direction:column;
 gap:2rem;
 max-width:700px;
 margin:0 auto;
}
.step{
 display:flex;
 gap:1.5rem;
 align-items:flex-start;
 background:var(--surface);
 backdrop-filter:blur(20px);
 padding:2rem;
 border-radius:20px;
 border:1px solid var(--border);
 transition:all 0.3s;
}
.step:hover{
 border-color:var(--primary);
 transform:translateX(10px);
}
.step-number{
 width:56px;
 height:56px;
 background:linear-gradient(135deg, var(--primary), var(--pink));
 color:white;
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:800;
 font-size:1.5rem;
 flex-shrink:0;
}
.step-content h3{
 font-size:1.25rem;
 margin-bottom:0.5rem;
 color:var(--text);
}
.step-content p{
 color:var(--text-muted);
 line-height:1.7;
}
/* ===========================================
 14. Content Pages (Docs, Terms, Privacy)
 =========================================== */
.page-content{
 max-width:900px;
 margin:0 auto;
 padding:4rem 2rem;
}
.page-content.narrow{
 max-width:800px;
}
.page-title{
 font-size:2.5rem;
 font-weight:800;
 margin-bottom:1rem;
 background:linear-gradient(135deg, var(--primary), var(--pink));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.intro{
 color:var(--text-muted);
 font-size:1.1rem;
 margin-bottom:3rem;
}
.updated{
 color:var(--text-muted);
 margin-bottom:3rem;
}
.page-content h2{
 font-size:1.5rem;
 color:var(--text);
 margin:2.5rem 0 1rem;
 padding-top:1rem;
 border-top:1px solid var(--border);
}
.page-content h2:first-of-type{
 border-top:none;
 margin-top:0;
}
.page-content h3{
 font-size:1.25rem;
 color:var(--text);
 margin:2rem 0 1rem;
}
.page-content p,
.page-content li{
 color:var(--text-muted);
 margin-bottom:1rem;
 line-height:1.8;
}
.page-content ul,
.page-content ol{
 margin-left:1.5rem;
 margin-bottom:1.5rem;
}
.page-content li{
 margin-bottom:0.5rem;
}
.page-content strong{
 color:var(--text);
}
.page-content a{
 color:var(--primary);
 text-decoration:none;
 transition:color 0.2s;
}
.page-content a:hover{
 text-decoration:underline;
}
/* ===========================================
 15. Table of Contents (Docs)
 =========================================== */
.toc{
 background:var(--surface);
 backdrop-filter:blur(20px);
 border-radius:16px;
 padding:1.5rem 2rem;
 margin-bottom:3rem;
 border:1px solid var(--border);
}
.toc h2{
 font-size:1rem;
 color:var(--text);
 margin-bottom:1rem;
 border:none;
 padding:0;
}
.toc ul{
 list-style:none;
 margin:0;
}
.toc li{
 margin-bottom:0.5rem;
}
.toc a{
 color:var(--primary);
 text-decoration:none;
 transition:color 0.2s;
}
.toc a:hover{
 text-decoration:underline;
}
/* ===========================================
 16. Cards Grid (Docs)
 =========================================== */
.card-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:1rem;
 margin:2rem 0;
}
.card{
 background:var(--surface);
 backdrop-filter:blur(20px);
 border:1px solid var(--border);
 border-radius:12px;
 padding:1.5rem;
 transition:all 0.2s;
}
.card:hover{
 border-color:var(--primary);
 transform:translateY(-2px);
 box-shadow:0 10px 30px rgba(168, 85, 247, 0.1);
}
.card h4{
 color:var(--text);
 margin-bottom:0.5rem;
 font-size:1rem;
}
.card p{
 color:var(--text-muted);
 font-size:0.9rem;
 margin:0;
 line-height:1.6;
}
/* ===========================================
 17. Tip Box (Docs)
 =========================================== */
.tip{
 background:rgba(168, 85, 247, 0.1);
 border-left:4px solid var(--primary);
 padding:1rem 1.5rem;
 border-radius:0 12px 12px 0;
 margin:1.5rem 0;
}
.tip strong{
 color:var(--primary);
}
.tip p{
 margin:0;
}
/* ===========================================
 18. Code Blocks (Docs)
 =========================================== */
code{
 background:rgba(168, 85, 247, 0.15);
 color:#c084fc;
 padding:0.2rem 0.5rem;
 border-radius:4px;
 font-family:'SF Mono', Monaco, 'Cascadia Code', monospace;
 font-size:0.9rem;
}
pre{
 background:rgba(0, 0, 0, 0.4);
 border:1px solid var(--border);
 border-radius:12px;
 padding:1.5rem;
 overflow-x:auto;
 margin:1.5rem 0;
}
pre code{
 background:none;
 padding:0;
 color:var(--text);
 font-size:0.875rem;
 line-height:1.6;
}
/* ===========================================
 19. Tables (Privacy)
 =========================================== */
table{
 width:100%;
 border-collapse:collapse;
 margin:1.5rem 0;
 background:var(--surface);
 border-radius:12px;
 overflow:hidden;
}
th, td{
 text-align:left;
 padding:1rem;
 border-bottom:1px solid var(--border);
}
th{
 color:var(--text);
 font-weight:600;
 background:rgba(168, 85, 247, 0.1);
}
td{
 color:var(--text-muted);
}
tr:last-child td{
 border-bottom:none;
}
/* ===========================================
 20. Contact Form
 =========================================== */
.form-container .btn-primary{
 width:100%;
}
.form-container{
 background:var(--surface);
 backdrop-filter:blur(20px);
 border:1px solid var(--border);
 border-radius:20px;
 padding:2.5rem;
}
.form-group{
 margin-bottom:1.5rem;
}
.form-group label{
 display:block;
 color:var(--text);
 font-weight:600;
 margin-bottom:0.5rem;
}
input, textarea, select{
 width:100%;
 padding:1rem;
 background:rgba(45, 45, 45, 0.6);
 border:2px solid var(--border-solid);
 border-radius:12px;
 color:var(--text);
 font-size:1rem;
 font-family:inherit;
 transition:all 0.2s;
}
input:focus, textarea:focus, select:focus{
 outline:none;
 border-color:var(--primary);
 box-shadow:0 0 0 3px rgba(168, 85, 247, 0.2);
}
input::placeholder, textarea::placeholder{
 color:var(--text-muted);
}
select{
 cursor:pointer;
 appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 1rem center;
}
select option{
 background:#1a1a1a;
 color:var(--text);
}
textarea{
 min-height:150px;
 resize:vertical;
}
/* ===========================================
 21. Form Messages
 =========================================== */
.form-message{
 padding:1rem 1.5rem;
 border-radius:12px;
 margin-bottom:1.5rem;
 display:none;
 align-items:center;
 gap:0.75rem;
 font-weight:500;
}
.form-message.success{
 display:flex;
 background:rgba(34, 197, 94, 0.15);
 border:1px solid rgba(34, 197, 94, 0.3);
 color:#22c55e;
}
.form-message.error{
 display:flex;
 background:rgba(239, 68, 68, 0.15);
 border:1px solid rgba(239, 68, 68, 0.3);
 color:#ef4444;
}
.form-message svg{
 flex-shrink:0;
}
/* ===========================================
 22. Spinner
 =========================================== */
.spinner{
 width:20px;
 height:20px;
 border:2px solid rgba(255, 255, 255, 0.3);
 border-top-color:white;
 border-radius:50%;
 animation:spin 0.8s linear infinite;
 margin-right:0.5rem;
}
@keyframes spin{
 to{transform:rotate(360deg)}
}
/* ===========================================
 23. Social Links
 =========================================== */
.social-links{
 display:flex;
 justify-content:center;
 gap:1.5rem;
 margin-top:3rem;
}
.social-link{
 width:48px;
 height:48px;
 background:var(--surface);
 backdrop-filter:blur(20px);
 border:1px solid var(--border);
 border-radius:12px;
 display:flex;
 align-items:center;
 justify-content:center;
 color:var(--text-muted);
 text-decoration:none;
 transition:all 0.2s;
 font-size:1.25rem;
}
.social-link:hover{
 border-color:var(--primary);
 color:var(--primary);
 transform:translateY(-2px);
}
/* ===========================================
 24. Blog
 =========================================== */
.blog-grid{
 display:flex;
 flex-direction:column;
 gap:3rem;
 margin-top:3rem;
}
.blog-card{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:2rem;
 background:var(--surface);
 backdrop-filter:blur(20px);
 border:1px solid var(--border);
 border-radius:24px;
 overflow:hidden;
 transition:all 0.3s;
 padding:1.5rem;
}
.blog-card:hover{
 box-shadow:0 20px 40px rgba(0, 0, 0, 0.3), 0 0 60px rgba(168, 85, 247, 0.1);
 border-color:var(--primary);
}
.blog-card-image{
 display:block;
 overflow:hidden;
 border-radius:16px;
 background:rgba(26, 26, 26, 0.8);
 border:1px solid var(--border);
}
.blog-card-image img{
 width:100%;
 height:100%;
 min-height:220px;
 object-fit:cover;
 transition:transform 0.3s;
}
.blog-card:hover .blog-card-image img{
 transform:scale(1.03);
}
.blog-card-content{
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:1rem 0.5rem;
}
@media (max-width:768px){
 .blog-card{
 grid-template-columns:1fr;
}
 .blog-card-image img{
 min-height:180px;
}
}
.blog-meta{
 display:flex;
 gap:1rem;
 margin-bottom:1rem;
 font-size:0.875rem;
}
.blog-category{
 background:linear-gradient(135deg, var(--primary), var(--pink));
 color:white;
 padding:0.25rem 0.75rem;
 border-radius:2rem;
 font-weight:600;
}
.blog-date{
 color:var(--text-muted);
}
.blog-card h2{
 font-size:1.5rem;
 margin-bottom:1rem;
 line-height:1.3;
}
.blog-card h2 a{
 color:var(--text);
 text-decoration:none;
 transition:color 0.2s;
}
.blog-card h2 a:hover{
 color:var(--primary);
}
.blog-card p{
 color:var(--text-muted);
 line-height:1.7;
 margin-bottom:1.25rem;
 font-size:1rem;
}
.blog-read-more{
 display:inline-flex;
 align-items:center;
 gap:0.5rem;
 color:var(--primary);
 text-decoration:none;
 font-weight:600;
 transition:all 0.2s;
}
.blog-read-more:hover{
 gap:0.75rem;
}
.blog-read-more::after{
 content:'\2192';
}
/* Article Content */
.article-content{
 max-width:800px;
}
.article-header{
 margin-bottom:2rem;
}
.article-header .blog-meta{
 margin-bottom:1.5rem;
}
.article-cta{
 background:var(--surface);
 backdrop-filter:blur(20px);
 border:1px solid var(--border);
 border-radius:20px;
 padding:2.5rem;
 text-align:center;
 margin-top:3rem;
}
.article-cta h3{
 font-size:1.5rem;
 color:var(--text);
 margin-bottom:0.75rem;
}
.article-cta p{
 color:var(--text-muted);
 margin-bottom:1.5rem;
}
.article-hero{
 margin:0 0 2.5rem 0;
 border-radius:16px;
 overflow:hidden;
 border:1px solid var(--border);
}
.article-hero img{
 width:100%;
 height:auto;
 display:block;
}
/* ===========================================
 25. Breadcrumbs
 =========================================== */
.breadcrumb{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-size:0.875rem;
 color:var(--text-muted);
 margin-bottom:1.5rem;
}
.breadcrumb a{
 color:var(--primary);
 text-decoration:none;
 transition:color 0.2s;
}
.breadcrumb a:hover{
 text-decoration:underline;
}
.breadcrumb span{
 color:var(--text-muted);
}
/* ===========================================
 25. Responsive
 =========================================== */
@media (max-width:768px){
 /* Header */
 .header-container{
 flex-direction:column;
 gap:1rem;
}
 nav{
 flex-direction:column;
 gap:1rem;
}
 .nav-links{
 gap:1rem;
}
 /* Hero */
 .hero h1{
 font-size:2.25rem;
}
 /* Tabs */
 .tabs{
 flex-wrap:wrap;
 width:100%;
}
 .tab-btn{
 flex:1;
 padding:0.75rem 1rem;
}
 /* Steps */
 .step{
 flex-direction:column;
 text-align:center;
}
 .step-number{
 margin:0 auto;
}
 /* Pages */
 .page-title{
 font-size:2rem;
}
 .page-content h2{
 font-size:1.5rem;
}
 /* Cards */
 .card-grid{
 grid-template-columns:1fr;
}
 /* Code */
 pre{
 padding:1rem;
 font-size:0.8rem;
}
 /* Tables */
 table{
 font-size:0.9rem;
}
 th, td{
 padding:0.75rem;
}
 /* Form */
 .form-container{
 padding:1.5rem;
}
 /* Footer */
 .footer-container{
 flex-direction:column;
 gap:1.5rem;
 text-align:center;
}
 .footer-links{
 flex-wrap:wrap;
 justify-content:center;
}
}