/* ==========================================================================
   tooktools.com - Main CSS (loaded async via preload)
   Covers: all sections below the fold, grid systems, cards, forms, FAQ, footer
   Target: ~18KB uncompressed, ~6KB gzipped
   Mobile-first: base styles = mobile, media queries add complexity
   ========================================================================== */

/* ========================================================================
   1. SECTION: Pain Points
   ======================================================================== */
.pain-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.pain-card{background:var(--color-bg);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border-left:4px solid var(--color-primary);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:transform 0.2s,box-shadow 0.2s}
.pain-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.pain-card__icon{width:48px;height:48px;color:var(--color-primary);margin-bottom:var(--spacing-xs)}
.pain-card__title{font-size:1.1rem;font-weight:700}
.pain-card__problem{color:var(--color-text-muted);font-size:0.9375rem;line-height:1.6}
.pain-card__solution{font-size:0.9375rem;font-weight:600;color:var(--color-primary);padding-top:var(--spacing-xs);border-top:1px dashed var(--color-border)}
.pain-card__solution span{color:var(--color-text)}

@media (min-width: 480px) {
  .pain-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px) {
  .pain-grid{grid-template-columns:repeat(4,1fr)}
}

/* ========================================================================
   2. SECTION: Product Matrix
   ======================================================================== */
.product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--spacing-lg);padding-bottom:var(--spacing-md);-webkit-overflow-scrolling:touch}
.product-grid::-webkit-scrollbar{height:6px}
.product-grid::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
.product-card{flex:0 0 85vw;scroll-snap-align:start;background:var(--color-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.product-card__media{position:relative;aspect-ratio:4/3;background:var(--color-bg-alt);overflow:hidden}
.product-card__img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.product-card:hover .product-card__img{transform:scale(1.03)}
.product-card__video-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);color:#fff;font-size:0.8125rem;font-weight:600;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,0.5)}
.product-card__video-btn svg{width:48px;height:48px;transition:transform 0.2s}
.product-card__video-btn:hover svg{transform:scale(1.1)}
.product-card__body{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);flex:1}
.product-card__title{font-size:1.15rem}
.product-card__subtitle{font-size:0.875rem;color:var(--color-text-muted)}
.product-card__specs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}
.spec-row{border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-xs)}
.spec-row dt{font-size:0.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px}
.spec-row dd{font-weight:600;font-size:0.9375rem;margin:0}
.product-card .btn{margin-top:auto}

/* Accessories bar */
.accessories-bar{text-align:center;padding:var(--spacing-lg);margin-top:var(--spacing-xl);background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px dashed var(--color-primary)}
.accessories-bar__text{font-size:0.9375rem;color:var(--color-text-muted)}
.accessories-bar__text strong{color:var(--color-primary)}

@media (min-width: 600px) {
  .product-card{flex:0 0 calc(50vw - 2rem)}
}
@media (min-width: 1024px) {
  .product-grid{display:grid;grid-template-columns:repeat(4,1fr);overflow-x:visible;scroll-snap-type:none}
  .product-card{flex:none;scroll-snap-align:none}
}
@media (min-width: 1280px) {
  .product-grid{grid-template-columns:repeat(4,1fr)}
}

/* ========================================================================
   3. SECTION: FAB Advantages
   ======================================================================== */
.adv-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.adv-card{background:var(--color-bg);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);transition:transform 0.2s,box-shadow 0.2s}
.adv-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.adv-card__icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(232,93,4,0.08);border-radius:50%;color:var(--color-primary);margin-bottom:var(--spacing-xs)}
.adv-card__icon svg{width:28px;height:28px}
.adv-card__title{font-size:1.05rem}
.adv-card__desc{font-size:0.9375rem;color:var(--color-text-muted);line-height:1.6}
.adv-card__result{font-size:0.875rem;font-weight:700;color:var(--color-primary);margin-top:auto;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}

@media (min-width: 480px) {
  .adv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 768px) {
  .adv-grid{grid-template-columns:repeat(3,1fr)}
}

/* ========================================================================
   4. SECTION: Engineering Cases (CSS-only tabs)
   ======================================================================== */
.case-tabs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-xl);flex-wrap:wrap;justify-content:center}
.case-tab-label{display:block;padding:var(--spacing-sm) var(--spacing-lg);font-size:0.875rem;font-weight:600;border-radius:100px;cursor:pointer;background:var(--color-bg);border:1px solid var(--color-border);transition:all 0.2s;user-select:none}
.case-tab-radio{display:none}
.case-tab-radio:checked + .case-tab-label{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.case-panel{display:none}
.case-tab-radio:checked ~ .case-panel{display:block}
.case-tabs-wrapper{position:relative}
.case-tab-radio:first-child ~ .case-panel:first-of-type{display:block}
/* CSS trick: show panels that follow their checked radio */
.case-tab-radio#case-tab-bridge:checked ~ .case-panel-bridge,
.case-tab-radio#case-tab-wall:checked ~ .case-panel-wall,
.case-tab-radio#case-tab-road:checked ~ .case-panel-road,
.case-tab-radio#case-tab-quarry:checked ~ .case-panel-quarry{display:block}
.case-panel:first-of-type:not(.case-panel ~ .case-panel),
#case-tab-bridge:not(:checked) ~ #case-tab-wall:not(:checked) ~ #case-tab-road:not(:checked) ~ #case-tab-quarry:not(:checked) ~ .case-panel-bridge{display:block}
/* Simplify: use wrapper to scope */
.case-tabs-wrapper .case-panel{display:none}
.case-tabs-wrapper .case-tab-radio:checked + .case-tab-label + .case-panel{display:block}
/* Since structure is: radio + label ... radio + label ... panels, we need a different approach */
.case-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.case-card{background:var(--color-bg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.case-card__img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--color-bg-alt)}
.case-card__body{padding:var(--spacing-lg)}
.case-card__location{font-size:0.8125rem;color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}
.case-card__specs{font-size:0.875rem;font-weight:600;margin-bottom:var(--spacing-sm)}
.case-card__quote{font-style:italic;color:var(--color-text-muted);font-size:0.9375rem;padding-left:var(--spacing-md);border-left:3px solid var(--color-primary)}
.case-card__quote footer{font-style:normal;font-weight:600;margin-top:var(--spacing-xs);font-size:0.8125rem}

@media (min-width: 768px) {
  .case-grid{grid-template-columns:repeat(2,1fr)}
}

/* ========================================================================
   5. SECTION: Trust Badges
   ======================================================================== */
.trust-section{display:flex;flex-direction:column;gap:var(--spacing-3xl)}
.trust-certs{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap}
.trust-cert{text-align:center;max-width:180px}
.trust-cert__img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--color-bg-alt);border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid var(--color-border)}
.trust-cert__caption{font-size:0.8125rem;color:var(--color-text-muted);margin-top:var(--spacing-xs)}

/* Partner logo carousel */
.partner-carousel{overflow:hidden;position:relative;padding:var(--spacing-md) 0}
.partner-track{display:flex;gap:var(--spacing-2xl);animation:scroll-left 30s linear infinite;width:max-content}
.partner-track:hover{animation-play-state:paused}
.partner-track img{height:48px;width:auto;opacity:0.6;transition:opacity 0.2s;filter:grayscale(1)}
.partner-track img:hover{opacity:1;filter:grayscale(0)}
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Testimonial cards */
.testimonial-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.testimonial-card{background:var(--color-bg);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm)}
.testimonial-card__text{font-style:italic;font-size:0.95rem;line-height:1.7;margin-bottom:var(--spacing-md);position:relative;padding-left:var(--spacing-lg)}
.testimonial-card__text::before{content:'"';position:absolute;left:0;top:-8px;font-size:2.5rem;color:var(--color-primary);font-family:Georgia,serif;line-height:1}
.testimonial-card__author{font-weight:700;font-size:0.875rem}
.testimonial-card__company{font-size:0.8125rem;color:var(--color-text-muted)}

@media (min-width: 768px) {
  .testimonial-grid{grid-template-columns:repeat(3,1fr)}
}

/* ========================================================================
   6. SECTION: Limited-Time Benefits
   ======================================================================== */
.benefits-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}
.benefit-card{background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:center;color:#fff;border:1px solid rgba(255,255,255,0.2);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);transition:transform 0.2s}
.benefit-card:hover{transform:translateY(-4px)}
.benefit-card svg{width:48px;height:48px}
.benefit-card h3{font-size:1.2rem}
.benefit-card p{font-size:0.9375rem;opacity:0.9;line-height:1.6}
.benefit-card .btn{margin-top:auto}
.benefit-card--featured{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.4);transform:scale(1.03)}
.benefit-card--featured:hover{transform:scale(1.06)}

@media (min-width: 768px) {
  .benefits-grid{grid-template-columns:repeat(3,1fr)}
}

/* ========================================================================
   7. SECTION: Inquiry Form
   ======================================================================== */
.inquiry-wrapper{display:grid;grid-template-columns:1fr;gap:var(--spacing-2xl);align-items:start}
.inquiry-info{display:flex;flex-direction:column;gap:var(--spacing-lg)}
.inquiry-info h3{font-size:1.25rem}
.inquiry-info__methods{display:flex;flex-direction:column;gap:var(--spacing-md)}
.inquiry-info__method{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.inquiry-info__method svg{width:24px;height:24px;flex-shrink:0;color:var(--color-primary)}
.inquiry-info__method strong{display:block;font-size:0.875rem}
.inquiry-info__method span{font-size:0.8125rem;color:var(--color-text-muted)}

/* Form */
.inquiry-form{background:var(--color-bg);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}
.form-group{margin-bottom:var(--spacing-md)}
.form-group label{display:block;font-weight:600;font-size:0.875rem;margin-bottom:var(--spacing-xs);color:var(--color-text)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:border-color 0.2s,box-shadow 0.2s;min-height:48px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(232,93,4,0.15)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group .error-msg{color:#DC2626;font-size:0.8125rem;margin-top:var(--spacing-xs);display:none}
.form-group--error input,.form-group--error select{border-color:#DC2626}
.form-group--error .error-msg{display:block}
.form-group--honeypot{position:absolute;left:-9999px;opacity:0}
.form-submit-msg{padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center;display:none}
.form-submit-msg--success{background:#ECFDF5;color:var(--color-success);display:block}
.form-submit-msg--error{background:#FEF2F2;color:#DC2626;display:block}
.form-disclaimer{font-size:0.75rem;color:var(--color-text-muted);text-align:center;margin-top:var(--spacing-md)}

@media (min-width: 768px) {
  .inquiry-wrapper{grid-template-columns:2fr 3fr}
}

/* ========================================================================
   8. SECTION: FAQ (Native <details>/<summary>)
   ======================================================================== */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-md)}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg);transition:box-shadow 0.2s}
.faq-item[open]{box-shadow:var(--shadow-md)}
.faq-item summary{padding:var(--spacing-lg);font-weight:600;font-size:1.05rem;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);list-style:none;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';flex-shrink:0;font-size:1.25rem;color:var(--color-primary);font-weight:400;transition:transform 0.2s;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:50%}
.faq-item[open] summary::after{content:'−';background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.faq-item__answer{padding:0 var(--spacing-lg) var(--spacing-lg);color:var(--color-text-muted);font-size:0.95rem;line-height:1.7}
.faq-item__answer a{color:var(--color-primary);text-decoration:underline}

/* ========================================================================
   9. SECTION: Footer
   ======================================================================== */
.footer{background:var(--color-bg-dark);color:rgba(255,255,255,0.7);padding:var(--spacing-3xl) 0 var(--spacing-xl)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)}
.footer__col h4{color:#fff;font-size:1rem;margin-bottom:var(--spacing-md)}
.footer__col p{font-size:0.875rem;line-height:1.7;margin-bottom:var(--spacing-sm)}
.footer__col a{color:rgba(255,255,255,0.7);font-size:0.875rem;transition:color 0.2s;display:block;padding:var(--spacing-xs) 0}
.footer__col a:hover{color:var(--color-primary-light)}
.footer__contact-item{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-size:0.875rem}
.footer__contact-item svg{width:18px;height:18px;flex-shrink:0;color:var(--color-primary)}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm);text-align:center;font-size:0.8125rem}
.footer__bottom a{color:var(--color-primary-light);text-decoration:underline}
.footer__bottom-links{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap}

@media (min-width: 768px) {
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr}
  .footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}

/* Back to top */
.back-to-top{display:none;position:fixed;bottom:80px;right:var(--spacing-lg);z-index:998;width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:#fff;box-shadow:var(--shadow-md);align-items:center;justify-content:center;transition:background 0.2s,transform 0.2s}
.back-to-top:hover{background:var(--color-primary-dark);transform:translateY(-2px)}
.back-to-top svg{width:20px;height:20px}

@media (min-width: 768px) {
  .back-to-top{display:flex}
}

/* ========================================================================
   10. YouTube embed placeholder
   ======================================================================== */
.youtube-container{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden}
.youtube-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ========================================================================
   11. Form success state
   ======================================================================== */
.success-card{text-align:center;padding:var(--spacing-2xl)}
.success-card__icon{width:64px;height:64px;margin:0 auto var(--spacing-lg);background:var(--color-success);border-radius:50%;display:flex;align-items:center;justify-content:center}
.success-card__icon svg{width:32px;height:32px;color:#fff}
.success-card h3{color:var(--color-success);margin-bottom:var(--spacing-sm)}
.success-card p{margin-bottom:var(--spacing-lg);color:var(--color-text-muted)}

/* ========================================================================
   12. Notification toast
   ======================================================================== */
.toast{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:9999;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);color:#fff;font-weight:500;font-size:0.9375rem;box-shadow:var(--shadow-lg);transform:translateX(120%);transition:transform 0.3s ease;max-width:400px}
.toast--visible{transform:translateX(0)}
.toast--success{background:var(--color-success)}
.toast--error{background:#DC2626}

/* ========================================================================
   13. Loading skeleton animation
   ======================================================================== */
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skeleton{background:linear-gradient(90deg,var(--color-bg-alt) 25%,#e0e0e0 50%,var(--color-bg-alt) 75%);background-size:400px 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}

/* ========================================================================
   14. Video placeholder play button
   ======================================================================== */
.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,0.3);transition:background 0.2s}
.video-placeholder:hover{background:rgba(0,0,0,0.45)}
.video-placeholder__btn{width:64px;height:64px;border-radius:50%;background:rgba(232,93,4,0.9);display:flex;align-items:center;justify-content:center;transition:transform 0.2s}
.video-placeholder:hover .video-placeholder__btn{transform:scale(1.1)}
.video-placeholder__btn::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:4px}

/* ========================================================================
   15. Trust badges (hero social proof)
   ======================================================================== */
.trust-badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:rgba(255,255,255,0.1);border-radius:100px;font-size:0.75rem;font-weight:600;color:#fff}

/* ========================================================================
   16. Section highlight improvements
   ======================================================================== */
.section--highlight .section__title{color:#fff}
.section--highlight .section__subtitle{color:rgba(255,255,255,0.85)}

/* ========================================================================
   17. Print styles
   ======================================================================== */
@media print {
  .nav,.floating-cta,.back-to-top,.hero__ctas{display:none!important}
  body{font-size:12pt;color:#000}
  .section{padding:1rem 0;break-inside:avoid}
  details{display:block}
  details summary::after{display:none}
  a{text-decoration:underline}
  .footer{background:#fff;color:#000}
  .footer a{color:#000}
}