/* ============================================================
   VidQuarry — Layout System
   Container, Grid, Sections, Responsive
   ============================================================ */

/* --- Container --- */
.container{width:100%;max-width:var(--container-xl);padding:0 var(--space-l)}

/* --- Page wrapper (accounts for fixed navbar) --- */
.page-wrapper{padding-top:var(--navbar-height)}

/* --- Sections --- */
.section{padding:var(--space-4xl) 0;display: flex;justify-content: center;}
.section-sm{padding:var(--space-3xl) 0}
.section-hero{min-height:calc(100vh - var(--navbar-height));display:flex;align-items:center;position:relative;overflow:hidden}

/* --- Hero Section --- */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-normal) var(--ease-fluent)}
html[dir="ltr"] .hero-bg img{transform:scaleX(-1) !important}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.40) 50%,rgba(255,255,255,0.75) 100%)}
.hero-container{position:relative;z-index:1;padding-top:var(--space-4xl);padding-bottom:var(--space-4xl)}
.hero-glass-card{position:relative;width:100%;border-radius:var(--radius-2xl);padding:var(--space-3xl);display:flex;align-items:center;min-height:400px;background:rgba(255,255,255,0.00);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);border:1px solid rgba(255,255,255,0.2);border-top:1px solid rgba(255,255,255,0.4);border-left:1px solid rgba(255,255,255,0.4);box-shadow:0 16px 40px rgba(0,0,0,0.1)}
html[dir="rtl"] .hero-glass-card{padding-right:420px;padding-left:var(--space-3xl)}
html[dir="ltr"] .hero-glass-card{padding-left:420px;padding-right:var(--space-3xl)}
.hero-content{position:relative;z-index:2;width:100%;max-width:700px;padding:0}
.hero-title{font-size:var(--font-display);font-weight:800;line-height:var(--lh-display);letter-spacing:-1.5px;margin-bottom:var(--space-m);max-width:800px}
.hero-subtitle{font-size:var(--font-h3);font-weight:400;color:var(--text-secondary);margin-bottom:var(--space-l);max-width:640px}
.hero-offer{margin-bottom:var(--space-xl)}
.hero-offer-text{font-size:var(--font-body-lg);color:var(--text-secondary)}
.hero-cta{display:flex;gap:50px;flex-wrap:wrap}
.hero-btn-os{border-radius:var(--radius-l);gap:var(--space-s)}
.btn-os-icon{width:20px;height:20px;flex-shrink:0;opacity:.9}
[dir="rtl"] .hero-title{letter-spacing:0;font-size:56px}

/* --- Grid layouts --- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-l)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-l)}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-m)}

/* --- Flex --- */
.flex{display:flex}.flex-col{flex-direction:column}
.flex-center{align-items:center;justify-content:center}
.flex-between{justify-content:space-between}
.gap-s{gap:var(--space-s)}.gap-m{gap:var(--space-m)}.gap-l{gap:var(--space-l)}.gap-xl{gap:var(--space-xl)}

/* --- Steps connector --- */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l);position:relative}
.steps-grid::before{content:'';position:absolute;top:28px;left:calc(16.66% + 28px);right:calc(16.66% + 28px);height:2px;background:var(--border-default);z-index:0}
[dir="rtl"] .steps-grid::before{left:calc(16.66% + 28px);right:calc(16.66% + 28px)}
.step-card{position:relative;z-index:1}

/* --- Platforms grid --- */
.platforms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-m);margin-top:var(--space-xl)}

/* --- Pricing grid --- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l);align-items:start}
.pricing-grid .pricing-card.featured{transform:scale(1.03)}

/* --- Testimonials --- */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l)}

/* --- FAQ container --- */
.faq-container{max-width:800px;margin:0 auto}

/* --- Legal pages --- */
.legal-content{max-width:800px;margin:0 auto;padding:var(--space-3xl) 0}
.legal-content h1{font-size:var(--font-h1);margin-bottom:var(--space-xl)}
.legal-content h2{font-size:var(--font-h3);margin-top:var(--space-2xl);margin-bottom:var(--space-m);color:var(--text-primary)}
.legal-content p{margin-bottom:var(--space-m);color:var(--text-secondary);line-height:var(--lh-body)}
.legal-content ul{margin:var(--space-m) 0;padding-inline-start:var(--space-l)}
.legal-content ul li{margin-bottom:var(--space-s);color:var(--text-secondary);position:relative;padding-inline-start:var(--space-m)}
.legal-content ul li::before{content:'•';position:absolute;inset-inline-start:0;color:var(--primary)}
.legal-content .last-updated{font-size:var(--font-caption);color:var(--text-tertiary);margin-bottom:var(--space-xl)}

/* --- Success/Cancel pages --- */
.result-page{min-height:calc(100vh - var(--navbar-height));display:flex;align-items:center;justify-content:center;text-align:center}
.result-card{max-width:500px;padding:var(--space-3xl)}
.result-icon{font-size:64px;margin-bottom:var(--space-l)}
.result-title{font-size:var(--font-h2);margin-bottom:var(--space-m)}
.result-text{font-size:var(--font-body);color:var(--text-secondary);margin-bottom:var(--space-xl)}

/* --- Pricing page hero --- */
.pricing-hero{background:var(--surface-secondary);padding:var(--space-3xl) 0;text-align:center}
.pricing-hero .section-title{font-size:var(--font-h1)}

/* --- Compare table --- */
.compare-table{width:100%;border-collapse:collapse;margin-top:var(--space-xl)}
.compare-table th,.compare-table td{padding:var(--space-m);text-align:center;border-bottom:1px solid var(--border-default);font-size:var(--font-body-sm)}
.compare-table th{font-weight:600;background:var(--surface-secondary)}
.compare-table td:first-child{text-align:start;font-weight:500}
.compare-table .check{color:var(--text-success);font-weight:700}
.compare-table .cross{color:var(--text-tertiary)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero-title{font-size:46px}
  [dir="rtl"] .hero-title{font-size:40px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .pricing-grid .pricing-card.featured{transform:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .hero-widget-img{max-width:280px;opacity:0.5}
  .hero-cta{justify-content:center}
}

@media(max-width:768px){
  :root{--font-display:42px;--font-h1:32px;--font-h2:26px;--font-h3:20px;--space-4xl:64px;--space-3xl:48px}
  .hero-title{font-size:38px}
  [dir="rtl"] .hero-title{font-size:34px}
  .hero-subtitle{font-size:var(--font-body)}
  .hero-glass-card,
  html[dir="rtl"] .hero-glass-card,
  html[dir="ltr"] .hero-glass-card{padding:var(--space-l)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .steps-grid::before{display:none}
  .testimonials-grid{grid-template-columns:1fr}
  .navbar-nav{display:none;position:absolute;top:var(--navbar-height);left:0;right:0;background:var(--surface-primary);border-bottom:1px solid var(--border-default);flex-direction:column;padding:var(--space-m);box-shadow:var(--shadow-16)}
  .navbar-nav.open{display:flex}
  .navbar-toggle{display:flex}
  .countdown-value{font-size:var(--font-h2)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:start}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta-item{width:100%}
  .hero-cta-row{width:100%}
  .hero-cta .btn{flex:1;justify-content:center}
  .hero-widget{display:none}
}

@media(max-width:480px){
  .container{padding:0 var(--space-m)}
  .grid-6{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .countdown{gap:var(--space-s)}
  .countdown-item{min-width:56px}
}