/* ==========================================
   SAFE AI USE PAGE STYLES
   ========================================== */

/* Framework Section */
.framework-section{
  padding:var(--spacing-xl) 0;
}
.framework-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:var(--spacing-lg);
  margin-top:var(--spacing-lg);
}
.framework-card{
  background:linear-gradient(135deg, 
              rgba(255,255,255,0.98) 0%, 
              rgba(250,246,239,0.95) 100%);
  padding:var(--spacing-xl);
  border-radius:var(--radius-lg);
  border:1px solid rgba(199,154,58,0.15);
  box-shadow:0 8px 32px rgba(15,59,47,0.08), 
             0 2px 8px rgba(199,154,58,0.05),
             inset 0 1px 0 rgba(255,255,255,0.9);
  text-align:center;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}
.framework-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  opacity:0;
  transition:opacity 0.3s ease;
}
.framework-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(199,154,58,0.18), 
             0 8px 24px rgba(15,59,47,0.12),
             inset 0 1px 0 rgba(255,255,255,1);
  border-color:rgba(199,154,58,0.3);
}
.framework-card:hover::before{
  opacity:1;
}
.framework-icon{
  width:72px;
  height:72px;
  margin:0 auto var(--spacing-md);
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:white;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.875rem;
  font-weight:700;
  font-family:'Plus Jakarta Sans', serif;
  box-shadow:0 8px 24px rgba(199,154,58,0.3), 
             0 2px 8px rgba(199,154,58,0.2),
             inset 0 -2px 4px rgba(0,0,0,0.15);
  transition:all 0.3s ease;
}
.framework-card:hover .framework-icon{
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 12px 32px rgba(199,154,58,0.4), 
             0 4px 12px rgba(199,154,58,0.25);
}
.framework-card h3{
  color:var(--text);
  margin-bottom:var(--spacing-sm);
}
.framework-card p{
  color:var(--text-soft);
  line-height:1.7;
  margin:0;
}

/* Tools Section */
.tools-section{
  padding:var(--spacing-xl) 0;
  background:linear-gradient(135deg, rgba(15,59,47,0.02) 0%, rgba(199,154,58,0.03) 100%);
  border-radius:var(--radius-lg);
}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--spacing-md);
  margin-top:var(--spacing-lg);
}
.tool-card{
  background:linear-gradient(135deg, 
              rgba(255,255,255,0.98) 0%, 
              rgba(251,252,250,0.95) 100%);
  padding:var(--spacing-lg);
  border-radius:var(--radius-lg);
  border:1px solid rgba(15,59,47,0.08);
  box-shadow:0 4px 16px rgba(15,59,47,0.06), 
             0 1px 4px rgba(15,59,47,0.04);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}
.tool-card::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:80px;
  height:80px;
  background:radial-gradient(circle at center, 
              rgba(199,154,58,0.06) 0%, 
              transparent 70%);
  border-radius:50%;
  transform:translate(50%, -50%);
  transition:all 0.4s ease;
}
.tool-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(199,154,58,0.12), 
             0 4px 16px rgba(15,59,47,0.08);
  border-color:rgba(199,154,58,0.2);
}
.tool-card:hover::after{
  width:120px;
  height:120px;
  background:radial-gradient(circle at center, 
              rgba(199,154,58,0.12) 0%, 
              transparent 70%);
}
.tool-card h3{
  font-size:1.125rem;
  margin-bottom:var(--spacing-xs);
  color:var(--text);
}
.tool-card p{
  color:var(--text-soft);
  font-size:0.9375rem;
  margin:0;
  line-height:1.6;
}

/* Testimonials */
.testimonials-section{
  padding:var(--spacing-xl) 0;
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:var(--spacing-lg);
  margin-top:var(--spacing-lg);
}
.testimonial-card{
  background:linear-gradient(135deg, 
              rgba(255,255,255,0.98) 0%, 
              rgba(250,246,239,0.92) 100%);
  padding:var(--spacing-xl);
  border-radius:var(--radius-lg);
  border-left:5px solid transparent;
  border-image:linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%) 1;
  box-shadow:0 8px 32px rgba(15,59,47,0.08), 
             0 2px 8px rgba(199,154,58,0.06);
  margin:0;
  transition:all 0.3s ease;
  position:relative;
}
.testimonial-card::before{
  content:'"';
  position:absolute;
  top:var(--spacing-sm);
  left:var(--spacing-md);
  font-size:4rem;
  font-family:'Plus Jakarta Sans', serif;
  color:rgba(199,154,58,0.15);
  line-height:1;
  pointer-events:none;
}
.testimonial-card:hover{
  transform:translateX(4px);
  box-shadow:0 12px 48px rgba(199,154,58,0.15), 
             0 4px 16px rgba(15,59,47,0.1);
}
.testimonial-card p{
  font-style:italic;
  color:var(--text-soft);
  margin-bottom:var(--spacing-sm);
  line-height:1.7;
  font-size:1.0625rem;
}
.testimonial-card cite{
  color:var(--muted);
  font-style:normal;
  font-weight:600;
  font-size:0.9375rem;
}

/* Shop Section */
.shop-section{
  padding:var(--spacing-xl) 0;
}
.shop-inner{
  text-align:center;
}
.shop-options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--spacing-lg);
  margin-top:var(--spacing-xl);
}
.shop-card{
  background:linear-gradient(135deg, 
              rgba(255,255,255,0.98) 0%, 
              rgba(251,252,250,0.95) 100%);
  padding:var(--spacing-xl) var(--spacing-lg);
  border-radius:var(--radius-lg);
  border:2px solid rgba(15,59,47,0.1);
  box-shadow:0 12px 40px rgba(15,59,47,0.08), 
             0 4px 16px rgba(15,59,47,0.04),
             inset 0 1px 0 rgba(255,255,255,0.8);
  position:relative;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
}
.shop-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, 
              rgba(199,154,58,0.03) 0%, 
              transparent 50%,
              rgba(15,59,47,0.02) 100%);
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.shop-card.featured{
  border-color:var(--accent);
  background:linear-gradient(135deg, 
              rgba(250,246,239,1) 0%, 
              rgba(253,251,247,1) 100%);
  box-shadow:0 20px 60px rgba(199,154,58,0.2), 
             0 8px 24px rgba(199,154,58,0.12),
             inset 0 1px 0 rgba(255,255,255,1);
  transform:scale(1.05);
}
.shop-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 24px 72px rgba(199,154,58,0.18), 
             0 12px 32px rgba(15,59,47,0.12);
  border-color:rgba(199,154,58,0.3);
}
.shop-card:hover::before{
  opacity:1;
}
.shop-card.featured:hover{
  transform:translateY(-8px) scale(1.07);
  box-shadow:0 32px 96px rgba(199,154,58,0.25), 
             0 16px 48px rgba(199,154,58,0.15);
}
.badge{
  position:absolute;
  top:-12px;
  right:var(--spacing-md);
  background:var(--accent);
  color:white;
  padding:0.375rem 0.875rem;
  border-radius:999px;
  font-size:0.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.shop-card h3{
  font-size:1.5rem;
  margin-bottom:var(--spacing-sm);
  color:var(--text);
}
.price{
  font-size:2.5rem;
  font-weight:700;
  color:var(--accent);
  font-family:'Plus Jakarta Sans', serif;
  margin-bottom:var(--spacing-md);
}
.feature-list{
  list-style:none;
  padding:0;
  margin:var(--spacing-md) 0;
  text-align:left;
}
.feature-list li{
  padding:var(--spacing-xs) 0;
  color:var(--text-soft);
  font-size:0.9375rem;
}
.shop-card .btn{
  margin-top:var(--spacing-md);
  width:100%;
}

/* Tablet (≤980px) - Enhanced intermediate responsive breakpoint */
@media (max-width:980px){
  /* Container: Better horizontal padding for tablet (excluding header) */
  main .container{
    padding-left:var(--spacing-xl);
    padding-right:var(--spacing-xl);
    max-width:100%;
  }
  
  /* Ensure header-inner maintains its own padding */
  .header-inner{
    padding-left:var(--spacing-lg);
    padding-right:var(--spacing-lg);
  }
  
  /* Hero: Refined tablet layout with better spacing */
  .product-hero{
    padding:calc(var(--spacing-xl) * 1.5) 0 var(--spacing-xl);
    margin-bottom:var(--spacing-lg);
  }
  .product-hero .hero-grid{
    gap:var(--spacing-xl);
    align-items:center;
  }
  .product-hero .hero-content{
    padding-right:var(--spacing-md);
  }
  .product-hero h1{
    font-size:clamp(2.125rem, 5vw, 2.75rem);
    line-height:1.2;
    margin-bottom:var(--spacing-md);
  }
  .product-hero .lede{
    font-size:1.0625rem;
    line-height:1.7;
    margin-bottom:var(--spacing-lg);
  }
  .product-hero .hero-actions{
    gap:var(--spacing-md);
    margin-top:var(--spacing-md);
  }
  .product-hero .hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:var(--spacing-md);
  }
  .product-hero .hero-image{
    max-width:90%;
    border-radius:var(--radius-lg);
    box-shadow:0 16px 48px rgba(15,59,47,0.12), 
               0 6px 20px rgba(199,154,58,0.08);
  }
  
  /* Section spacing: More breathing room between sections */
  .framework-section{
    padding:calc(var(--spacing-xl) * 1.5) 0;
    margin-bottom:var(--spacing-lg);
  }
  .tools-section{
    padding:calc(var(--spacing-xl) * 1.5) 0;
    margin:var(--spacing-lg) 0;
  }
  .testimonials-section{
    padding:calc(var(--spacing-xl) * 1.5) 0;
    margin-bottom:var(--spacing-lg);
  }
  .shop-section{
    padding:calc(var(--spacing-xl) * 1.5) 0;
    margin-bottom:var(--spacing-lg);
  }
  
  /* Section headers: Better spacing */
  .section-header{
    margin-bottom:calc(var(--spacing-xl) * 1.25);
    padding:0 var(--spacing-sm);
  }
  .section-header h2{
    font-size:2rem;
    margin-bottom:var(--spacing-sm);
  }
  .section-header .muted{
    font-size:1.0625rem;
  }
  
  /* Framework cards: Elegant 2-column grid with refined spacing */
  .framework-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--spacing-lg) var(--spacing-xl);
    margin-top:var(--spacing-lg);
  }
  .framework-card{
    padding:calc(var(--spacing-lg) * 1.25);
    margin-bottom:0;
  }
  .framework-icon{
    width:68px;
    height:68px;
    font-size:1.75rem;
    margin-bottom:var(--spacing-md);
  }
  .framework-card h3{
    font-size:1.375rem;
    margin-bottom:var(--spacing-sm);
  }
  .framework-card p{
    font-size:1rem;
    line-height:1.7;
    margin:0;
  }
  
  /* Tools: Balanced 2-column layout with better gaps */
  .tools-section h2{
    font-size:2rem;
    margin-bottom:var(--spacing-lg);
    text-align:center;
  }
  .tools-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--spacing-md) var(--spacing-lg);
    margin-top:var(--spacing-lg);
  }
  .tool-card{
    padding:var(--spacing-lg);
    margin-bottom:0;
  }
  .tool-card h3{
    font-size:1.125rem;
    margin-bottom:var(--spacing-xs);
  }
  .tool-card p{
    font-size:1rem;
    line-height:1.65;
    margin:0;
  }
  
  /* Testimonials: 2 columns with generous spacing */
  .testimonials-section h2{
    font-size:2rem;
    margin-bottom:var(--spacing-xl);
    text-align:center;
  }
  .testimonials-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--spacing-lg) var(--spacing-xl);
    margin-top:var(--spacing-lg);
  }
  .testimonial-card{
    padding:var(--spacing-lg) var(--spacing-xl);
    margin-bottom:0;
  }
  .testimonial-card::before{
    font-size:3.5rem;
    left:var(--spacing-lg);
  }
  .testimonial-card p{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:var(--spacing-sm);
  }
  .testimonial-card cite{
    margin-top:var(--spacing-sm);
  }
  
  /* Shop cards: Maintain 3 columns with refined spacing */
  .shop-section{
    text-align:center;
  }
  .shop-inner h2{
    font-size:2.125rem;
    margin-bottom:var(--spacing-sm);
  }
  .shop-inner > .muted{
    margin-bottom:var(--spacing-xl);
  }
  .shop-options{
    grid-template-columns:repeat(3, 1fr);
    gap:var(--spacing-md) var(--spacing-lg);
    margin-top:var(--spacing-xl);
  }
  .shop-card{
    padding:var(--spacing-lg) var(--spacing-md);
    margin-bottom:0;
  }
  .shop-card h3{
    font-size:1.25rem;
    margin-bottom:var(--spacing-sm);
  }
  .price{
    font-size:2.25rem;
    margin-bottom:var(--spacing-md);
  }
  .feature-list{
    margin:var(--spacing-md) 0;
  }
  .feature-list li{
    font-size:0.9375rem;
    padding:0.375rem 0;
  }
  .shop-card .btn{
    margin-top:var(--spacing-md);
  }
  
  /* CTA Section: Centered and spacious with better margins */
  .cta{
    padding:calc(var(--spacing-xl) * 1.5) 0;
    margin-top:var(--spacing-lg);
    text-align:center;
  }
  .cta-inner{
    padding:0 var(--spacing-xl);
  }
  .cta-inner h2{
    font-size:2.125rem;
    margin-bottom:var(--spacing-md);
  }
  .cta-inner .muted{
    font-size:1.0625rem;
    margin-bottom:var(--spacing-xl);
    line-height:1.7;
  }
  .cta-actions{
    flex-direction:row;
    justify-content:center;
    gap:var(--spacing-md);
    margin-top:var(--spacing-md);
  }
  .cta-actions .btn{
    width:auto;
    min-width:200px;
    padding:0.875rem 1.75rem;
  }
}

/* Mobile (≤760px) - Modern, polished responsive design */
@media (max-width:760px){
  /* Hero: Clean mobile layout */
  .product-hero{
    padding:var(--spacing-xl) 0 var(--spacing-lg);
    background:linear-gradient(135deg, 
                rgba(250,246,239,0.3) 0%, 
                rgba(255,255,255,0.5) 100%);
  }
  .product-hero .hero-grid{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-xl);
  }
  .product-hero .hero-content{
    padding:0;
    text-align:center;
  }
  .product-hero .eyebrow{
    font-size:0.75rem;
    letter-spacing:0.1em;
    margin-bottom:var(--spacing-sm);
    display:inline-block;
    padding:0.375rem 0.875rem;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:white;
    border-radius:999px;
  }
  .product-hero h1{
    font-size:clamp(1.625rem, 5.5vw, 2rem);
    line-height:1.25;
    margin-bottom:var(--spacing-md);
    color:var(--text);
  }
  .product-hero .lede{
    font-size:0.9375rem;
    line-height:1.65;
    margin-bottom:var(--spacing-lg);
    color:var(--text-soft);
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
  }
  .product-hero .hero-actions{
    flex-direction:column;
    gap:var(--spacing-sm);
    width:100%;
    max-width:100%;
  }
  .product-hero .hero-actions .btn{
    width:100%;
    padding:1rem 1.5rem;
    font-size:0.9375rem;
    font-weight:600;
  }
  .product-hero .hero-visual{
    margin-top:0;
    text-align:center;
    padding:0 var(--spacing-sm);
  }
  .product-hero .hero-image{
    width:100%;
    max-width:100%;
    height:auto;
    border-radius:var(--radius);
    box-shadow:0 16px 48px rgba(15,59,47,0.15), 
               0 4px 16px rgba(199,154,58,0.1);
  }

  /* Framework cards: Clean single-column layout */
  .framework-section{
    padding:var(--spacing-xl) 0;
  }
  .framework-section .section-header{
    margin-bottom:var(--spacing-lg);
  }
  .framework-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
  }
  .framework-card{
    padding:var(--spacing-lg);
    border-radius:var(--radius);
    box-shadow:0 6px 24px rgba(15,59,47,0.08), 
               0 2px 8px rgba(199,154,58,0.05);
    border-width:1px;
  }
  .framework-card:active{
    transform:translateY(-2px);
  }
  .framework-card::before{
    height:3px;
  }
  .framework-icon{
    width:56px;
    height:56px;
    font-size:1.5rem;
    margin-bottom:var(--spacing-md);
    box-shadow:0 6px 20px rgba(199,154,58,0.25), 
               0 2px 8px rgba(199,154,58,0.15);
  }
  .framework-card h3{
    font-size:1.25rem;
    margin-bottom:var(--spacing-sm);
  }
  .framework-card p{
    font-size:0.9375rem;
    line-height:1.6;
  }

  /* Tools section: Compact mobile grid */
  .tools-section{
    padding:var(--spacing-xl) 0;
    border-radius:var(--radius);
    margin:var(--spacing-md) 0;
  }
  .tools-section h2{
    font-size:1.625rem;
    margin-bottom:var(--spacing-lg);
    text-align:center;
  }
  .tools-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-sm);
  }
  .tool-card{
    padding:var(--spacing-md);
    border-radius:var(--radius);
    box-shadow:0 4px 16px rgba(15,59,47,0.06);
    border-width:1px;
  }
  .tool-card:active{
    transform:translateY(-2px);
  }
  .tool-card::after{
    width:60px;
    height:60px;
  }
  .tool-card h3{
    font-size:1rem;
    margin-bottom:var(--spacing-xs);
  }
  .tool-card p{
    font-size:0.875rem;
    line-height:1.55;
  }

  /* Testimonials: Elegant quote cards */
  .testimonials-section{
    padding:var(--spacing-xl) 0;
  }
  .testimonials-section h2{
    font-size:1.625rem;
    text-align:center;
    margin-bottom:var(--spacing-lg);
  }
  .testimonials-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
  }
  .testimonial-card{
    padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    border-radius:var(--radius);
    box-shadow:0 6px 24px rgba(15,59,47,0.08);
    border-left-width:4px;
  }
  .testimonial-card::before{
    font-size:2.5rem;
    top:var(--spacing-xs);
    left:var(--spacing-md);
    opacity:0.8;
  }
  .testimonial-card p{
    font-size:0.875rem;
    line-height:1.6;
    margin-top:var(--spacing-md);
    position:relative;
    z-index:1;
  }
  .testimonial-card cite{
    font-size:0.8125rem;
    display:block;
    margin-top:var(--spacing-sm);
  }

  /* Shop section: Clean pricing cards */
  .shop-section{
    padding:var(--spacing-xl) 0;
  }
  .shop-inner h2{
    font-size:1.625rem;
    margin-bottom:var(--spacing-xs);
  }
  .shop-inner > .muted{
    font-size:0.9375rem;
    margin-bottom:var(--spacing-xl);
  }
  .shop-options{
    grid-template-columns:1fr;
    gap:var(--spacing-md);
    margin-top:var(--spacing-lg);
  }
  .shop-card{
    padding:var(--spacing-lg);
    transform:none !important;
    box-shadow:0 8px 32px rgba(15,59,47,0.08), 
               0 2px 8px rgba(199,154,58,0.05);
    border-radius:var(--radius);
  }
  .shop-card.featured{
    transform:none !important;
    box-shadow:0 12px 40px rgba(199,154,58,0.15), 
               0 4px 16px rgba(199,154,58,0.08);
    border-width:2px;
    padding:var(--spacing-xl) var(--spacing-lg);
  }
  .shop-card:active{
    transform:scale(0.99) !important;
  }
  .badge{
    top:-8px;
    right:var(--spacing-md);
    padding:0.3rem 0.75rem;
    font-size:0.6875rem;
  }
  .shop-card h3{
    font-size:1.25rem;
    margin-bottom:var(--spacing-sm);
  }
  .price{
    font-size:2rem;
    margin-bottom:var(--spacing-md);
  }
  .feature-list{
    margin:var(--spacing-sm) 0 var(--spacing-md);
  }
  .feature-list li{
    padding:0.375rem 0;
    font-size:0.875rem;
  }
  .shop-card .btn{
    width:100%;
    padding:0.875rem 1.25rem;
    font-size:0.9375rem;
    margin-top:var(--spacing-sm);
  }

  /* CTA: Compelling mobile call-to-action */
  .cta{
    padding:var(--spacing-xl) 0;
    text-align:center;
    background:linear-gradient(135deg, 
                rgba(250,246,239,0.4) 0%, 
                rgba(255,255,255,0.6) 100%);
    border-radius:var(--radius);
    margin:var(--spacing-lg) 0;
  }
  .cta-inner{
    text-align:center;
    padding:0 var(--spacing-md);
  }
  .cta-inner h2{
    font-size:1.625rem;
    margin-bottom:var(--spacing-sm);
    line-height:1.3;
  }
  .cta-inner .muted{
    font-size:0.9375rem;
    margin-bottom:var(--spacing-lg);
    line-height:1.6;
  }
  .cta-actions{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-sm);
    align-items:stretch;
  }
  .cta-actions .btn{
    width:100%;
    padding:1rem 1.5rem;
    font-size:0.9375rem;
    font-weight:600;
  }

  /* Section headers: Clean mobile typography */
  .section-header{
    text-align:center;
    margin-bottom:var(--spacing-lg);
    padding:0 var(--spacing-sm);
  }
  .section-header h2{
    font-size:1.625rem;
    margin-bottom:var(--spacing-xs);
    line-height:1.3;
  }
  .section-header .muted{
    font-size:0.9375rem;
    line-height:1.6;
  }
  
  /* Container padding adjustment for mobile (excluding header) */
  main .container{
    padding-left:var(--spacing-md);
    padding-right:var(--spacing-md);
  }
  
  /* Ensure header maintains consistent padding across all pages */
  .header-inner{
    padding-left:var(--spacing-md);
    padding-right:var(--spacing-md);
  }
}