/* PuzzleCast — Widget Syndication Site Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --dark:#1E1E2E;--dark-surface:#2A2A3C;--dark-border:#3A3A4C;
  --blue:#4FC3F7;--blue-hover:#29B6F6;--green:#66BB6A;--green-hover:#57A85B;
  --white:#FFFFFF;--gray-100:#F5F5F5;--gray-300:#B0B0C0;--gray-500:#8888A0;
  --radius:12px;--radius-sm:8px;--shadow:0 2px 12px rgba(0,0,0,.3);
  --transition:.25s ease;
  --font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--white);background:var(--dark);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--blue-hover)}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Header */
.site-header{background:var(--dark-surface);border-bottom:1px solid var(--dark-border);position:sticky;top:0;z-index:100}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.logo{font-size:1.5rem;font-weight:800;color:var(--white)}
.logo span{color:var(--blue)}
.nav{display:flex;gap:24px;list-style:none}
.nav a{font-weight:600;font-size:.9rem;color:var(--gray-300);transition:color var(--transition)}
.nav a:hover,.nav a.active{color:var(--blue)}
.hamburger{display:none;background:none;border:none;width:32px;height:32px;flex-direction:column;justify-content:center;gap:5px}
.hamburger span{display:block;width:100%;height:3px;background:var(--white);border-radius:2px;transition:var(--transition)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--dark) 0%,#2D2D4E 50%,var(--dark-surface) 100%);padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(79,195,247,.08),transparent 60%)}
.hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:16px}
.hero h1 span{color:var(--blue)}
.hero p{font-size:clamp(1rem,2vw,1.2rem);color:var(--gray-300);max-width:600px;margin:0 auto 32px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;border:none;transition:all var(--transition)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:var(--green-hover);color:var(--white);transform:translateY(-2px);box-shadow:0 4px 16px rgba(102,187,106,.3)}
.btn-blue{background:var(--blue);color:var(--dark)}
.btn-blue:hover{background:var(--blue-hover);color:var(--dark);transform:translateY(-2px)}
.btn-outline{background:transparent;border:2px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--dark)}
.btn-sm{padding:8px 18px;font-size:.85rem}

/* Sections */
.section{padding:60px 0}
.section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;text-align:center;margin-bottom:12px}
.section-subtitle{text-align:center;color:var(--gray-300);margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}

/* Cards */
.card{background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:var(--radius);padding:28px;transition:all var(--transition)}
.card:hover{border-color:var(--blue);box-shadow:0 4px 24px rgba(79,195,247,.1);transform:translateY(-4px)}
.card h3{font-size:1.1rem;margin-bottom:8px}
.card p{color:var(--gray-300);font-size:.9rem;margin-bottom:16px}

/* How It Works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;counter-reset:step}
.step{text-align:center;position:relative}
.step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--blue);color:var(--dark);font-weight:800;font-size:1.2rem;margin:0 auto 16px}
.step h3{font-size:1rem;margin-bottom:8px}
.step p{color:var(--gray-300);font-size:.85rem}

/* Widget Preview */
.widget-preview{border:1px solid var(--dark-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--white)}
.widget-preview iframe{width:100%;min-height:400px;border:none;display:block}

/* Code Blocks */
.code-block{background:#0D0D1A;border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:20px;font-family:'SF Mono','Fira Code','Courier New',monospace;font-size:.85rem;overflow-x:auto;position:relative;line-height:1.8;color:#A8E6CF}
.code-block .tag{color:#FF6B6B}
.code-block .attr{color:var(--blue)}
.code-block .val{color:#FFD93D}
.code-block button{position:absolute;top:10px;right:10px;background:var(--green);color:var(--white);border:none;padding:6px 14px;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s}
.code-block button:hover{background:var(--green-hover)}

/* Embed Code */
.embed-code{background:#0D0D1A;border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:14px;font-family:'SF Mono','Fira Code','Courier New',monospace;font-size:.8rem;overflow-x:auto;position:relative;color:#A8E6CF;margin-top:12px}
.embed-code button{position:absolute;top:8px;right:8px;background:var(--green);color:var(--white);border:none;padding:5px 12px;border-radius:4px;font-size:.7rem;font-weight:600;cursor:pointer}

/* Benefits */
.benefit-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:rgba(79,195,247,.1);color:var(--blue)}

/* Docs */
.doc-section{background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:var(--radius);padding:32px;margin-bottom:24px}
.doc-section h2{color:var(--blue);font-size:1.3rem;margin-bottom:16px}
.doc-section h3{color:var(--white);font-size:1rem;margin:20px 0 8px}
.doc-section p,.doc-section li{color:var(--gray-300);font-size:.9rem;margin-bottom:8px}
.doc-section ul,.doc-section ol{padding-left:24px}
.doc-section table{width:100%;border-collapse:collapse;margin:16px 0}
.doc-section th,.doc-section td{padding:10px 14px;text-align:left;border:1px solid var(--dark-border);font-size:.85rem}
.doc-section th{background:rgba(79,195,247,.1);color:var(--blue)}

/* Categories filter */
.category-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.category-tab{padding:8px 20px;border-radius:20px;border:2px solid var(--dark-border);background:transparent;color:var(--gray-300);font-weight:600;font-size:.85rem;transition:all .15s;cursor:pointer}
.category-tab:hover,.category-tab.active{border-color:var(--blue);color:var(--blue);background:rgba(79,195,247,.1)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:var(--radius);padding:32px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;position:relative}
.modal h3{margin-bottom:16px}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--gray-300);font-size:1.5rem;cursor:pointer}

/* Footer */
.site-footer{background:#151520;border-top:1px solid var(--dark-border);padding:48px 0 24px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-bottom:32px}
.footer-col h4{font-size:.9rem;font-weight:700;margin-bottom:16px;color:var(--blue)}
.footer-col a{display:block;color:var(--gray-300);font-size:.85rem;margin-bottom:8px}
.footer-col a:hover{color:var(--blue)}
.footer-bottom{border-top:1px solid var(--dark-border);padding-top:24px;text-align:center;font-size:.8rem;color:var(--gray-500)}
.footer-bottom a{color:var(--blue)}
.gwn-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);padding:6px 14px;border-radius:20px;font-size:.75rem;color:var(--gray-500);margin-top:12px}

/* Responsive */
@media(max-width:768px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark-surface);flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--dark-border)}
  .nav.open{display:flex}
  .hamburger{display:flex}
  .hero{padding:60px 0 40px}
  .section{padding:40px 0}
}

/* Utility */
.text-center{text-align:center}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}