/* ==========================================================================
   DINKAR SOLUTION — "Weightless" Master Design System v3.0
   Premium | SEO-Fast | Mobile-First | Hand-Crafted
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1. DESIGN TOKENS                                                    */
/* ------------------------------------------------------------------ */
:root {
  --paper:           #FFFFFF;
  --fog:             #F6F7FB;
  --ink:             #10131C;
  --slate:           #5B6070;
  --indigo:          #3D4CFF;
  --indigo-hover:    #2B3CE8;
  --aqua:            #00C2CB;
  --coral:           #FF6A4D;
  --line:            rgba(16,19,28,0.08);
  --line-med:        rgba(16,19,28,0.14);
  --whatsapp:        #25D366;
  --whatsapp-dark:   #128C7E;
  --emerald:         #10B981;
  --emerald-dark:    #059669;

  /* Component aliases */
  --bg-color:        var(--paper);
  --card-bg:         var(--paper);
  --text-main:       var(--ink);
  --text-secondary:  var(--slate);
  --text-muted:      #8A919F;
  --border-color:    var(--line);
  --primary:         var(--indigo);
  --primary-light:   #6B78FF;

  /* Fonts */
  --font-display:    'Sora', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Radii */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* Shadows */
  --shadow-xs:   0 2px  6px  rgba(16,19,28,0.04);
  --shadow-sm:   0 4px  14px rgba(16,19,28,0.06);
  --shadow-md:   0 12px 32px rgba(16,19,28,0.10);
  --shadow-lg:   0 24px 56px rgba(16,19,28,0.14);
  --shadow-indig:0 8px  28px rgba(61,76,255,0.25);
}

/* ------------------------------------------------------------------ */
/* 2. RESET & BASE                                                     */
/* ------------------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  padding-top: 75px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; }

/* ------------------------------------------------------------------ */
/* 3. TYPOGRAPHY                                                       */
/* ------------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem);  font-weight:800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight:700; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight:700; }
h4 { font-size: 1.125rem; font-weight:700; }

p { color: var(--slate); line-height:1.75; }

.lead {
  font-size: clamp(1rem, 2vw, 1.175rem);
  color: var(--slate);
  line-height: 1.75;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--aqua) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Eyebrow label */
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--indigo);
  margin-bottom: 1rem;
}

.eyebrow-dot {
  width:8px; height:8px;
  background: var(--emerald);
  border-radius:50%;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
  flex-shrink:0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,100% { box-shadow:0 0 0 3px rgba(16,185,129,0.2); }
  50%      { box-shadow:0 0 0 6px rgba(16,185,129,0.08); }
}

/* ------------------------------------------------------------------ */
/* 4. LAYOUT & GRID                                                    */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.section {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
}

/* Section backgrounds — tonal shift, no hard lines */
.bg-paper, .section-paper { background-color: var(--paper); }
.bg-fog,   .section-fog   {
  background-color: var(--fog);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grid { display:grid; gap:2rem; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

@media (max-width:1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:640px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------ */
/* 5. AURA BLOBS (Signature Element)                                   */
/* ------------------------------------------------------------------ */
.aura-wrapper { position:relative; overflow:hidden; }

.aura-blob {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter: blur(90px);
  opacity: 0.12;
}

.aura-indigo {
  width: clamp(300px,40vw,550px);
  height: clamp(300px,40vw,550px);
  background: radial-gradient(circle, var(--indigo), transparent 70%);
  top: -80px; right: -80px;
  animation: float-blob 10s ease-in-out infinite;
}

.aura-aqua {
  width: clamp(250px,35vw,480px);
  height: clamp(250px,35vw,480px);
  background: radial-gradient(circle, var(--aqua), transparent 70%);
  bottom: -60px; left: -60px;
  animation: float-blob 13s ease-in-out infinite reverse;
}

@keyframes float-blob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-20px) scale(1.04); }
}

/* ------------------------------------------------------------------ */
/* 6. CARDS (Floating / Gravity-Defying)                               */
/* ------------------------------------------------------------------ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.32s cubic-bezier(0.16,1,0.3,1),
              border-color 0.2s ease;
  position: relative;
  z-index:1;
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: rgba(61,76,255,0.18);
}

.card-icon {
  width:52px; height:52px;
  background: linear-gradient(135deg,rgba(61,76,255,0.1),rgba(0,194,203,0.1));
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  color: var(--indigo);
  margin-bottom:1.25rem;
  flex-shrink:0;
}

/* ------------------------------------------------------------------ */
/* 7. SCROLL REVEAL ANIMATION                                          */
/* ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ------------------------------------------------------------------ */
/* 8. HEADER NAVIGATION                                                */
/* ------------------------------------------------------------------ */
.header {
  position: fixed;
  top:0; left:0; right:0;
  height: 75px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
  display:flex; align-items:center;
  box-shadow: 0 2px 16px rgba(16,19,28,0.04);
}

.header-inner {
  display:flex; align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  height:100%;
}

.brand-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  white-space:nowrap;
  letter-spacing:-0.025em;
}

.brand-logo span { color:var(--indigo); }

.brand-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  background: linear-gradient(135deg,var(--indigo),var(--aqua));
  color:#fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.nav-links {
  display:flex; align-items:center;
  gap:1.25rem;
}

.nav-links a {
  color:var(--slate);
  font-size:0.92rem;
  font-weight:500;
  transition:color 0.18s;
  white-space:nowrap;
  padding:0.2rem 0;
  position:relative;
}

.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:var(--indigo);
  border-radius:2px;
  transition:width 0.22s ease;
}

.nav-links a:hover,
.nav-links a.active { color:var(--indigo); font-weight:700; }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }

.header-actions {
  display:flex; align-items:center;
  gap:0.75rem; flex-shrink:0;
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:space-around;
  width:30px; height:24px;
  background:transparent;
  border:none; cursor:pointer; padding:0;
  z-index:1010;
}

.hamburger span {
  width:100%; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:all 0.3s ease;
}

/* Mobile Drawer */
.mobile-drawer {
  position:fixed;
  top:75px; left:0; right:0; bottom:0;
  background:#ffffff;
  padding:2rem 1.5rem;
  display:flex; flex-direction:column;
  gap:0.25rem;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
  z-index:999;
  overflow-y:auto;
  border-top:1px solid var(--line);
}

.mobile-drawer.open { transform:translateX(0); }

.mobile-drawer a {
  color:var(--ink);
  font-size:1.05rem;
  font-weight:600;
  padding: 0.9rem 0;
  border-bottom:1px solid var(--line);
  display:block;
}

.mobile-drawer a:hover { color:var(--indigo); }

@media (max-width:1100px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
}

/* ------------------------------------------------------------------ */
/* 9. BUTTONS                                                           */
/* ------------------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.5rem;
  padding: 0.72rem 1.6rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border:none; cursor:pointer;
  transition:all 0.22s cubic-bezier(0.16,1,0.3,1);
  white-space:nowrap;
  line-height:1.4;
}

.btn-primary {
  background:linear-gradient(135deg,var(--indigo),var(--indigo-hover));
  color:#fff;
  box-shadow: 0 4px 16px rgba(61,76,255,0.30);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(61,76,255,0.40);
}

.btn-whatsapp {
  background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-dark));
  color:#fff;
  box-shadow: 0 4px 16px rgba(37,211,102,0.28);
}
.btn-whatsapp:hover {
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.40);
}

.btn-coral {
  background:linear-gradient(135deg,var(--coral),#e8553a);
  color:#fff;
  box-shadow: 0 4px 16px rgba(255,106,77,0.28);
}
.btn-coral:hover { transform:translateY(-2px); }

.btn-outline {
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--line-med);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
  border-color:var(--indigo);
  color:var(--indigo);
  transform:translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-sm  { padding:0.45rem 1rem;  font-size:0.855rem; border-radius:var(--radius-sm); }
.btn-lg  { padding:0.9rem  2.2rem; font-size:1.05rem; }

/* ------------------------------------------------------------------ */
/* 10. STATS STRIP                                                      */
/* ------------------------------------------------------------------ */
.stats-strip {
  background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-hover) 60%,var(--aqua) 100%);
  padding: 3.5rem 0;
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  text-align:center;
}

.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight:700;
  color:#fff;
  line-height:1;
  margin-bottom:0.5rem;
}

.stat-label {
  font-size:0.88rem;
  color:rgba(255,255,255,0.78);
  font-weight:500;
  letter-spacing:0.03em;
}

@media (max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:1.75rem; }
}

@media (max-width:400px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:1rem; }
}

/* ------------------------------------------------------------------ */
/* 11. PRICING CARDS                                                    */
/* ------------------------------------------------------------------ */
.pricing-card {
  background:var(--paper);
  border: 1.5px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  display:flex; flex-direction:column;
  justify-content:space-between;
  gap:2rem;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition:transform 0.32s cubic-bezier(0.16,1,0.3,1),
             box-shadow 0.32s cubic-bezier(0.16,1,0.3,1);
}

.pricing-card:hover {
  transform:translateY(-6px);
  box-shadow: var(--shadow-md);
}

.pricing-card.popular {
  border-color:var(--indigo);
  box-shadow: 0 0 0 3px rgba(61,76,255,0.10), var(--shadow-sm);
}

.pricing-card.popular:hover {
  box-shadow: 0 0 0 3px rgba(61,76,255,0.15), var(--shadow-md);
}

.pricing-badge {
  position:absolute;
  top:1.25rem; right:1.25rem;
  background:var(--indigo);
  color:#fff;
  font-family: var(--font-mono);
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.07em;
  padding:3px 10px;
  border-radius:99px;
}

.pricing-price {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight:700;
  color:var(--indigo);
  margin:1.25rem 0;
  line-height:1;
}
.pricing-price span {
  font-size:0.85rem;
  font-weight:500;
  color:var(--slate);
  font-family:var(--font-body);
}

.pricing-features {
  margin:0; padding:0;
  list-style:none;
  display:flex; flex-direction:column;
  gap:0.75rem;
  margin-bottom:0.25rem;
}

.pricing-features li {
  display:flex; align-items:center;
  gap:0.6rem;
  font-size:0.93rem;
  color:var(--slate);
}

.pricing-features svg {
  width:16px; height:16px;
  color:var(--emerald);
  flex-shrink:0;
}

/* ------------------------------------------------------------------ */
/* 12. FAQ ACCORDION                                                    */
/* ------------------------------------------------------------------ */
.faq-list { display:flex; flex-direction:column; gap:0.75rem; }

.faq-item {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color 0.2s;
}

.faq-item.open,
.faq-item:hover { border-color:var(--line-med); }

.faq-question {
  width:100%; background:transparent; border:none;
  padding:1.25rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; text-align:left;
  font-family:var(--font-body);
  font-size:1rem; font-weight:600; color:var(--ink);
  gap:1rem;
  transition:color 0.2s;
}

.faq-question:hover { color:var(--indigo); }

.faq-icon {
  width:22px; height:22px;
  border:1.5px solid var(--line-med);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform 0.3s ease, background 0.2s;
}

.faq-item.open .faq-icon {
  transform:rotate(45deg);
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fff;
}

.faq-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s cubic-bezier(0.16,1,0.3,1);
}

.faq-item.open .faq-answer { max-height:500px; }

.faq-answer p {
  padding:0 1.5rem 1.25rem 1.5rem;
  font-size:0.93rem; line-height:1.75;
  color:var(--slate);
}

/* ------------------------------------------------------------------ */
/* 13. FLOATING WHATSAPP BUTTON                                        */
/* ------------------------------------------------------------------ */
.wa-float {
  position:fixed;
  bottom:24px; right:24px;
  width:58px; height:58px;
  background:var(--whatsapp);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(37,211,102,0.45);
  z-index:990;
  transition:transform 0.28s ease, box-shadow 0.28s ease;
  animation: wa-pulse 3s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%,100% { box-shadow:0 8px 28px rgba(37,211,102,0.45); }
  50%      { box-shadow:0 8px 40px rgba(37,211,102,0.65); }
}

.wa-float:hover {
  transform:scale(1.12);
  box-shadow:0 12px 36px rgba(37,211,102,0.55);
  animation:none;
}

.wa-float svg { width:32px; height:32px; fill:currentColor; }

/* ------------------------------------------------------------------ */
/* 14. FOOTER                                                           */
/* ------------------------------------------------------------------ */
.footer {
  background:var(--fog);
  border-top:1px solid var(--line);
  padding:5rem 0 2.5rem;
  margin-top:0;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:3.5rem;
}

@media (max-width:960px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .footer-grid { grid-template-columns:1fr; } }

.footer-heading {
  font-family:var(--font-display);
  font-size:0.9rem;
  font-weight:700;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:1.25rem;
}

.footer-links { list-style:none; }
.footer-links li { margin-bottom:0.7rem; }
.footer-links a {
  color:var(--slate);
  font-size:0.9rem;
  transition:color 0.18s;
}
.footer-links a:hover { color:var(--indigo); }

.footer-bottom {
  padding-top:2rem;
  border-top:1px solid var(--line);
  display:flex; align-items:center;
  justify-content:space-between;
  color:var(--slate);
  font-size:0.85rem;
  flex-wrap:wrap; gap:1rem;
}

.footer-bottom a { color:var(--slate); }
.footer-bottom a:hover { color:var(--ink); }

/* ------------------------------------------------------------------ */
/* 15. SHOP PAGE & FLIPKART GRID (unchanged — per user instruction)   */
/* ------------------------------------------------------------------ */
.shop-hero {
  background:linear-gradient(135deg,rgba(61,76,255,0.05),rgba(0,194,203,0.05));
  border-bottom:1px solid var(--line);
  padding:2.5rem 0 1.5rem;
}

.shop-container {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:2rem;
  align-items:start;
  padding-top:1.5rem;
}

.filter-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1.5rem;
  position:sticky;
  top:95px;
  box-shadow:var(--shadow-xs);
}

.filter-title {
  font-size:1.05rem; font-weight:700;
  margin-bottom:1rem; padding-bottom:0.5rem;
  border-bottom:1px solid var(--line);
}

.filter-list { list-style:none; padding:0; }
.filter-list li { margin-bottom:0.6rem; }
.filter-list a {
  color:var(--slate); text-decoration:none;
  font-size:0.93rem; transition:color 0.18s;
  display:flex; justify-content:space-between;
}
.filter-list a:hover,.filter-list a.active { color:var(--indigo); font-weight:700; }

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}

@media (max-width:1100px) {
  .shop-container { grid-template-columns:1fr; }
  .filter-card { display:none; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:768px) {
  .product-grid { grid-template-columns:repeat(2,1fr) !important; gap:0.75rem !important; }
}

.fk-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.fk-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(61,76,255,0.25);
}

.fk-card-image {
  position:relative; width:100%; padding-top:75%;
  background:#f1f5f9; border-bottom:1px solid var(--line); overflow:hidden;
}
.fk-card-image img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

.fk-badge-discount {
  position:absolute; top:8px; left:8px;
  background:var(--coral); color:#fff;
  font-family:var(--font-mono); font-size:0.7rem; font-weight:700;
  padding:2px 6px; border-radius:4px; z-index:2;
}

.fk-card-body {
  padding:0.95rem; display:flex;
  flex-direction:column; flex-grow:1;
}

.fk-category {
  font-family:var(--font-mono);
  font-size:0.68rem; text-transform:uppercase;
  color:var(--indigo); font-weight:700;
  letter-spacing:0.04em; margin-bottom:0.3rem;
}

.fk-title {
  font-size:0.93rem; font-weight:700; color:var(--ink);
  line-height:1.35; margin-bottom:0.4rem;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}

.fk-desc {
  font-size:0.8rem; color:var(--slate); line-height:1.3;
  margin-bottom:0.75rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.fk-price-box {
  display:flex; align-items:baseline; gap:0.5rem;
  margin-top:auto; margin-bottom:0.75rem;
}

.fk-price {
  font-family:var(--font-mono); font-size:1.15rem;
  font-weight:700; color:var(--emerald);
}

.fk-old-price {
  font-family:var(--font-mono); font-size:0.8rem;
  color:var(--text-muted); text-decoration:line-through;
}

.btn-buy-now {
  width:100%; padding:0.55rem;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-dark));
  color:#fff; font-weight:700; font-size:0.85rem;
  text-align:center; border-radius:6px; text-decoration:none;
  display:block; transition:opacity 0.18s;
}
.btn-buy-now:hover { opacity:0.9; }

.shop-toolbar {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:0.75rem 1.25rem;
  margin-bottom:1.25rem; display:flex;
  align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}

/* ------------------------------------------------------------------ */
/* 16. FORM CONTROLS                                                    */
/* ------------------------------------------------------------------ */
.form-group {
  margin-bottom: 1.35rem;
}

.form-label {
  display:block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line-med);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(61,76,255,0.1);
}

.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 110px; }
select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6070' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.9rem center; padding-right:2.5rem; }

/* ------------------------------------------------------------------ */
/* 17. SOFTWARE / PRODUCT LISTING CARDS                                */
/* ------------------------------------------------------------------ */
.software-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s;
  position:relative;
  overflow:hidden;
}

.software-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--indigo),var(--aqua));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.3s ease;
}

.software-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(61,76,255,0.18); }
.software-card:hover::before { transform:scaleX(1); }

/* ------------------------------------------------------------------ */
/* 18. PAGE HERO (Short subpage hero variant)                          */
/* ------------------------------------------------------------------ */
.page-hero {
  background:linear-gradient(160deg,rgba(61,76,255,0.04) 0%,rgba(0,194,203,0.04) 100%);
  border-bottom:1px solid var(--line);
  padding: clamp(5rem,10vw,7rem) 0 clamp(3rem,6vw,4.5rem);
  position:relative;
  overflow:hidden;
}

/* ------------------------------------------------------------------ */
/* 19. BADGE CHIPS (Reusable)                                          */
/* ------------------------------------------------------------------ */
.chip {
  display:inline-flex; align-items:center;
  gap:0.35rem;
  padding:0.3rem 0.75rem;
  border-radius:99px;
  font-size:0.78rem;
  font-weight:700;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.06em;
  border:1px solid;
}

.chip-indigo { background:rgba(61,76,255,0.08); color:var(--indigo); border-color:rgba(61,76,255,0.2); }
.chip-green  { background:rgba(16,185,129,0.08); color:var(--emerald); border-color:rgba(16,185,129,0.2); }
.chip-coral  { background:rgba(255,106,77,0.08); color:var(--coral); border-color:rgba(255,106,77,0.2); }
.chip-aqua   { background:rgba(0,194,203,0.08); color:var(--aqua); border-color:rgba(0,194,203,0.2); }

/* ------------------------------------------------------------------ */
/* 20. DIVIDER                                                          */
/* ------------------------------------------------------------------ */
.divider {
  width:64px; height:3px;
  background:linear-gradient(90deg,var(--indigo),var(--aqua));
  border-radius:99px;
  margin:1.25rem 0 1.75rem;
}

/* ------------------------------------------------------------------ */
/* 21. RESPONSIVE UTILITIES                                             */
/* ------------------------------------------------------------------ */
.text-center  { text-align:center; }
.mx-auto      { margin-left:auto; margin-right:auto; }
.mt-xs  { margin-top:0.5rem; }
.mt-sm  { margin-top:1rem; }
.mt-md  { margin-top:2rem; }
.mt-lg  { margin-top:3rem; }
.mb-xs  { margin-bottom:0.5rem; }
.mb-sm  { margin-bottom:1rem; }
.mb-md  { margin-bottom:2rem; }
.mb-lg  { margin-bottom:3rem; }
.flex   { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-sm { gap:0.75rem; }
.gap-md { gap:1.5rem; }
.gap-lg { gap:2.5rem; }

/* max-width helpers */
.max-600 { max-width:600px; }
.max-800 { max-width:800px; }
.max-1000 { max-width:1000px; }

/* ------------------------------------------------------------------ */
/* 22. MOBILE GLOBAL FIXES                                             */
/* ------------------------------------------------------------------ */
@media (max-width:768px) {
  body { padding-top:70px; }

  h1 { font-size:clamp(1.75rem,7vw,2.5rem); }
  h2 { font-size:clamp(1.4rem,5vw,2rem); }

  .btn-lg { padding:0.8rem 1.6rem; font-size:0.95rem; }

  .section { padding:3rem 0; }

  .card  { padding:1.5rem; }
  .pricing-card { padding:1.75rem; }

  .footer { padding:3.5rem 0 2rem; }
  .footer-bottom { flex-direction:column; gap:0.75rem; text-align:center; }
  .footer-bottom div { flex-wrap:wrap; justify-content:center; }
}

/* ------------------------------------------------------------------ */
/* 23. PRINT UTILITIES (SEO/Accessibility)                             */
/* ------------------------------------------------------------------ */
@media print {
  .header,.hamburger,.mobile-drawer,.wa-float,.aura-blob { display:none !important; }
  body { padding-top:0; }
}