.hero-content-wrapper{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:start;margin-top:2rem}.hero-text-content{display:flex;flex-direction:column;gap:1.5rem}.action-buttons{display:flex;gap:1rem;flex-wrap:wrap}.tool-hero-title{font-size:3.5rem;font-weight:700;line-height:1.1;margin:0;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tool-description{font-size:1.1rem;line-height:1.6;color:var(--color-text-secondary);margin:0}.btn-cta{background:linear-gradient(135deg,var(--primary-accent) 0%,var(--secondary-accent) 100%);color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:var(--space-2);cursor:pointer;transition:all .3s var(--transition-ease);display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;box-shadow:0 4px 12px #00000026}.btn-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.btn-cta:active{transform:translateY(0)}.tool-hero-image{display:flex;align-items:center;justify-content:center;min-height:250px}.hero-img{width:100%;height:auto;border-radius:var(--space-2);box-shadow:var(--shadow-lg);transition:transform .3s var(--transition-ease)}.image-placeholder{width:100%;height:250px;background:var(--color-surface);border:2px dashed var(--color-text-secondary);border-radius:var(--space-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--color-text-secondary)}.image-placeholder i{font-size:3rem;opacity:.5}.image-placeholder span{font-size:1.1rem;font-weight:500}.info-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.demo-content-wrapper{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:stretch;scroll-margin-top:100px}.info-grid-simple{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.info-card,.how-to-use-card{background:var(--color-surface);padding:2rem;border-radius:var(--space-2);box-shadow:var(--shadow-md);transition:transform .2s var(--transition-medium),box-shadow .2s var(--transition-medium)}.info-card h3,.how-to-use-card h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--color-primary);font-size:1.25rem;font-weight:600}.target-audience-list,.usage-steps-list{margin:0;padding-left:1.5rem}.target-audience-list li,.usage-steps-list li{margin-bottom:.5rem;line-height:1.5}.demo-section{position:sticky;top:2rem;height:fit-content}.how-to-use-section{height:100%;display:flex;flex-direction:column}.how-to-use-card{flex:1;display:flex;flex-direction:column}.try-tool-title{font-size:1.5rem;font-weight:600;color:var(--color-primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.tool-embed-section{background:var(--color-surface);border-radius:var(--space-2);overflow:hidden;box-shadow:var(--shadow-lg)}.tool-embed-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:var(--color-background);border-bottom:1px solid var(--color-border, #e5e7eb)}.tool-embed-controls{display:flex;gap:.5rem;align-items:center}.tool-iframe-container{position:relative;background:#f8f9fa;overflow:hidden}.tool-iframe{width:100%;height:100%;border:none;transform:scale(1);transform-origin:top left}.iframe-overlay{position:absolute;inset:0;background:#ffffffe6;display:flex;align-items:center;justify-content:center;z-index:10}.loading-spinner{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--color-primary)}.loading-spinner i{font-size:2rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.section-header h2{font-size:2rem;margin-bottom:1.5rem;color:var(--color-primary);display:flex;align-items:center;gap:.5rem}.faq-container{display:flex;flex-direction:column;gap:1rem}.faq-item{background:var(--color-surface);border-radius:var(--space-1);box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--transition-fast)}.faq-item:hover{box-shadow:var(--shadow-md)}.faq-item summary{padding:1.5rem;cursor:pointer;font-weight:600;color:var(--color-primary);list-style:none;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);font-size:1.2rem;font-weight:300;transition:transform .2s var(--transition-fast)}.faq-item[open] summary:after{transform:translateY(-50%) rotate(45deg)}.faq-item p{padding:0 1.5rem 1.5rem;margin:0;line-height:1.6;color:var(--color-text-secondary)}.tool-iframe-container iframe{overflow:hidden}@media (max-width: 1024px){.hero-content-wrapper{grid-template-columns:1fr;gap:2rem}.tool-hero-image{display:none}.demo-content-wrapper{grid-template-columns:1fr;gap:2rem}.demo-section{position:static}.info-row{grid-template-columns:1fr;gap:2rem}}@media (max-width: 768px){.tool-hero-title{font-size:2.5rem}.tool-description{font-size:1rem}.btn-cta{padding:.875rem 1.5rem;font-size:1rem}.info-grid-simple{grid-template-columns:1fr;gap:3rem}.tool-embed-controls{gap:.25rem}.tool-embed-controls button{font-size:.85rem;padding:.5rem .75rem}.tool-embed-controls button i{font-size:.9rem}.tool-embed-controls{flex-direction:column;gap:.5rem;align-items:stretch}.tool-embed-controls button{width:100%;justify-content:center;font-size:.9rem;padding:.6rem 1rem}.info-card,.how-to-use-card{padding:1.5rem}.faq-item summary,.faq-item p{padding-left:1rem;padding-right:1rem}}@media (max-width: 480px){.tool-hero-title{font-size:2rem}.hero-content-wrapper{gap:1.5rem}.btn-cta{width:100%;justify-content:center}.tool-embed-controls{flex-direction:column;gap:.25rem}.tool-embed-controls button{width:100%;justify-content:center;font-size:.8rem;padding:.5rem}.info-card,.how-to-use-card{padding:1rem}}html[data-theme=dark] .image-placeholder{background:var(--color-surface);border-color:var(--color-text-secondary)}html[data-theme=dark] .tool-embed-header{background:var(--color-surface);border-color:#ffffff1a}html[data-theme=dark] .iframe-overlay{background:#1e1e1ee6}.tool-card{height:100%}.tool-card .tool-card-inner{display:flex;flex-direction:column;height:100%;background:var(--color-surface);border-radius:var(--space-2);box-shadow:var(--shadow-md);overflow:hidden}.tool-card .tool-image{aspect-ratio:16 / 9;background:var(--color-surface);position:relative}.tool-card .tool-image img{width:100%;height:100%}.tool-card .tool-content{display:flex;flex-direction:column;gap:.75rem;padding:1rem 1rem 1.25rem;flex:1 1 auto;min-height:0}.tool-card .tool-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tool-card .tool-title{font-size:1.125rem;font-weight:700;line-height:1.2;margin:0;flex:1 1 auto}.tool-card .tool-category{--chip-bg: var(--color-background);--chip-bd: rgba(0,0,0,.08);--chip-fg: var(--color-text-secondary);display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid var(--chip-bd);background:var(--chip-bg);color:var(--chip-fg);white-space:nowrap}.tool-card .tool-category i{font-size:.95rem;opacity:.9}.tool-card.cat-productivity .tool-category{--chip-bg: rgba(99,102,241,.1);--chip-bd: rgba(99,102,241,.3);--chip-fg: #6366f1}.tool-card.cat-compliance .tool-category{--chip-bg: rgba(16,185,129,.1);--chip-bd: rgba(16,185,129,.3);--chip-fg: #10b981}.tool-card.cat-utility .tool-category{--chip-bg: rgba(59,130,246,.1);--chip-bd: rgba(59,130,246,.3);--chip-fg: #3b82f6}.tool-card .tool-description{margin:0;color:var(--color-text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}.tool-card .tool-footer{margin-top:auto}.tool-card .btn-primary{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;font-weight:700;border-radius:var(--space-2)}.tool-card .coming-soon-badge{position:absolute;right:.75rem;top:.75rem;padding:.35rem .6rem;border-radius:999px;background:#000000a6;color:#fff;font-size:.75rem;font-weight:600}html[data-theme=dark] .tool-card .tool-category{--chip-bd: rgba(255,255,255,.15)}