/* CellPorFix palette layer: preserve the original landing-page composition,
   using the carton purple / blue / orange as accents. */
:root {
  --green: #6844b6;
  --green-deep: #392070;
  --pink: #f47b22;
  --ink: #241b36;
  --muted: #685f75;
  --soft: #f7f3fb;
  --line: #e3dced;
  --box-purple: #6844b6;
  --box-purple-dark: #392070;
  --box-blue: #1716c8;
  --box-orange: #f47b22;
  --box-orange-light: #ffb078;
}

body { background: #fffdfd; color: var(--ink); }
.header { border-bottom: 1px solid #eee9f2; }
.brand, .brand small { color: var(--box-purple); }
.brand-name span { color: var(--box-orange); }
.nav a:hover, .nav a.active { color: var(--box-purple); border-bottom-color: var(--box-orange); }
.button { background: var(--box-purple); border-color: var(--box-purple); box-shadow: 0 8px 20px #6844b620; }
.button:hover { background: var(--box-purple-dark); }
.button-ghost { background: #fff; color: var(--box-purple); border-color: #cfc2e3; box-shadow: none; }
.button-ghost:hover { background: var(--box-purple); }

/* Keep the earlier airy hero; only recolor its soft background textures. */
.hero { background: #fff; }
.hero-bg-left { background: radial-gradient(circle at 58% 40%, transparent 0 25%, #e3d5f4 25.2% 25.6%, transparent 25.8% 30%, #f4edfc 30.2% 31%, transparent 31.2%), radial-gradient(circle, #d3bfe9 1px, transparent 1.6px); background-size: auto, 8px 8px; }
.hero-bg-right { background: radial-gradient(circle, #f7a16c 1px, transparent 1.5px); background-size: 7px 7px; }
.eyebrow, .section-kicker { color: var(--box-purple); }
.latin { color: var(--box-purple); }
.hero-copy h2 { color: var(--ink); }
.hero-claims b, .benefits-card span, .line-icon, .application-grid span { color: var(--box-purple); }
.benefits-card { border-color: #e8e1ef; box-shadow: 0 16px 38px #6844b612; }
.benefits-card h3 { color: var(--box-purple); }
.benefits-card .pink, .process-flow .pink, .pink-icon { color: var(--box-orange); }

/* One real box image only. The hero shows a single-box crop as a compact
   product reference. */
.packaging-photo-wrap { position: absolute; right: -12px; bottom: 14px; width: 205px; z-index: 0; filter: drop-shadow(0 14px 16px #6844b61a); opacity: .92; }
.packaging-photo { display: block; width: 100%; max-height: 150px; object-fit: contain; mix-blend-mode: multiply; border-radius: 12px; }
.product-stage > .drop, .product-stage > .lab-lines { z-index: 1; }

.process-flow > i, .process-flow em { color: var(--box-purple); }
.text-link { color: var(--box-purple); border-color: #d9cde8; }
.text-link:hover { background: var(--box-purple); }
.muted-section { background: linear-gradient(105deg, #faf7fd, #fff7f0); }
.application-grid a:hover { box-shadow: 0 12px 28px #6844b620; }
.application-grid strong { color: #302342; }
.comparison-panel { background: linear-gradient(120deg, #f8f4fc, #fff5ee); }
.comparison-grid li:before { color: var(--box-orange); }
.vs { background: var(--box-purple); }

.package-card { min-height: 220px; justify-content: flex-start; border-color: #e4dbea; background: linear-gradient(135deg, #fff 0 74%, #fff7f1 100%); }
.package-image { width: 160px; min-width: 160px; height: 150px; align-self: center; object-fit: contain; border-radius: 12px; mix-blend-mode: multiply; filter: drop-shadow(0 12px 12px #6844b61a); }
.package-copy > b { color: var(--box-purple); }
.package-copy li::marker { color: var(--box-orange); }
.pill { background: #f0e6fc; color: var(--box-purple); }

.about-section { background: linear-gradient(100deg, #f5eefb, #fff7ef); }
/* Use a laboratory image for the company section; the box appears only once in the hero. */
.lab-photo { background: linear-gradient(120deg, #e4d8f1aa, #fff0e4aa), url('assets/lab-workflow-illustration.png') center/cover; }
.about-copy h2, .nafas-mark, .nafas-mark b { color: var(--box-purple); }
.nafas-mark span { color: var(--box-orange); }
footer { background: radial-gradient(circle at 14% 32%, #7654b2, #29114c 66%); }
.footer-brand .brand-name span { color: var(--box-orange-light); }

/* Supporting pages and the inquiry flow retain their existing structure. */
.product-detail-grid { border-color: #e4dbea; box-shadow: 0 18px 45px #6844b60e; }
.product-detail-copy h2, .about-page h1 { color: var(--box-purple); }
.product-detail-copy li::marker { color: var(--box-orange); }
.about-page-art { background: linear-gradient(135deg, #ede3fa, #fff1e6); }
.inquiry-section { background: linear-gradient(105deg, #faf7fd, #fff7f0); }
.inquiry-intro h2 { color: var(--box-purple); }
.inquiry-intro h2 span { color: var(--box-orange); }
.inquiry-contact-list > a:not(.button) { color: var(--box-purple); }
.inquiry-contact-list > a:not(.button):hover { color: var(--box-orange); }
.inquiry-form { border-color: #e4dbea; box-shadow: 0 18px 45px #6844b612; }
.form-field label { color: var(--box-purple); }
.form-field label span { color: var(--box-orange); }
.form-field input, .form-field select, .form-field textarea { border-color: #dcd2e8; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--box-purple); box-shadow: 0 0 0 3px #6844b614; }
.inquiry-success { color: var(--box-purple); background: #f6edff; border-color: #d9c3ed; }
/* Layout rules shared by the supporting pages and inquiry form. */
.product-detail-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 44px; align-items: center; background: #fff; border: 1px solid #e4dbea; border-radius: 20px; padding: 30px 36px; box-shadow: 0 18px 45px #6844b60e; }
.product-detail-copy h2 { color: var(--box-purple); font-size: 24px; margin: 0 0 12px; }
.product-detail-copy p, .product-detail-copy li { color: var(--muted); font-size: 13px; line-height: 2.1; }
.product-detail-copy ul { padding-right: 20px; margin: 12px 0 20px; }
.product-detail-copy li::marker { color: var(--box-orange); }
.product-detail-image { width: 100%; max-height: 340px; object-fit: contain; mix-blend-mode: multiply; border-radius: 14px; }
.application-grid-wide { grid-template-columns: repeat(4, 1fr); max-width: 890px; margin: auto; }
.application-grid-wide article { height: 143px; background: #fff; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 18px #6844b60a; }
.application-grid-wide article span { font: 38px/1 Arial; color: var(--box-purple); }
.application-grid-wide article strong { font-size: 10px; color: #302342; margin-top: 13px; }
.application-grid-wide article small { font: 8px Manrope; color: #849087; margin-top: 4px; }
.page-note { max-width: 650px; margin: 30px auto 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 2; }
.about-page { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; max-width: 960px; }
.about-page-art { background: linear-gradient(135deg, #ede3fa, #fff1e6); border-radius: 22px; padding: 24px; }
.about-page-art img { width: 100%; display: block; mix-blend-mode: multiply; border-radius: 14px; }
.about-page h1 { color: var(--box-purple); font-size: 31px; line-height: 1.7; margin: 0 0 10px; }
.about-page p { color: var(--muted); font-size: 13px; line-height: 2.15; }
.inquiry-section { background: linear-gradient(105deg, #faf7fd, #fff7f0); }
.inquiry-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 42px; align-items: start; max-width: 1050px; }
.inquiry-intro { padding: 18px 0 0; }
.inquiry-intro h2 { color: var(--box-purple); font-size: 30px; line-height: 1.65; margin: 0 0 14px; }
.inquiry-intro h2 span { color: var(--box-orange); }
.inquiry-intro > p:not(.section-kicker) { color: var(--muted); font-size: 13px; line-height: 2.15; margin: 0; }
.inquiry-contact-list { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 24px; direction: ltr; }
.inquiry-contact-list > a:not(.button) { color: var(--box-purple); font: 600 12px Manrope, Arial, sans-serif; text-decoration: none; }
.inquiry-contact-list > a:not(.button):hover { color: var(--box-orange); }
.contact-address { max-width: 270px; color: var(--muted); font: 500 10px/1.9 Vazirmatn, Arial, sans-serif; direction: ltr; text-align: left; }
.inquiry-whatsapp { direction: rtl; margin-top: 7px; }
.inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 25px; background: #fff; border: 1px solid #e4dbea; border-radius: 18px; box-shadow: 0 18px 45px #6844b612; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { color: var(--box-purple); font-size: 11px; font-weight: 700; }
.form-field label span { color: var(--box-orange); }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #dcd2e8; border-radius: 10px; background: #fff; color: #2d213f; font: 500 12px Vazirmatn, Arial, sans-serif; padding: 11px 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.form-field input, .form-field select { height: 43px; }
.form-field textarea { min-height: 100px; resize: vertical; line-height: 1.8; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--box-purple); box-shadow: 0 0 0 3px #6844b614; }
.form-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 3px; }
.form-note { color: #84798e; font-size: 9px; line-height: 1.8; margin: 0; }
.inquiry-success { color: var(--box-purple); background: #f6edff; border: 1px solid #d9c3ed; border-radius: 10px; font-size: 11px; line-height: 1.9; padding: 11px 13px; margin: 0; }
.inquiry-success.show { animation: rise .35s both; }
.lab-visuals-section { background: linear-gradient(105deg, #fbf9fd, #fff8f2); }
.lab-visual-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: repeat(2, minmax(190px, 1fr)); gap: 14px; }
.lab-visual-card { position: relative; min-height: 190px; margin: 0; overflow: hidden; border: 1px solid #e4dbea; border-radius: 18px; background: #fff; box-shadow: 0 16px 35px #6844b612; }
.lab-visual-card img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.lab-visual-wide { grid-row: 1 / span 2; }
.lab-visual-card figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 9px 12px; border-radius: 10px; background: #241b36cc; color: #fff; font-size: 11px; line-height: 1.7; }
.visual-credit { margin: 12px 0 0; color: var(--muted); font-size: 9px; text-align: center; }

@media (max-width: 900px) {
  .packaging-photo-wrap { right: 3%; width: 175px; }
  .packaging-photo { max-height: 125px; }
}

@media (max-width: 620px) {
  .product-detail-grid, .about-page { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .product-detail-image { grid-row: 1; }
  .application-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .about-page { padding: 0 10px; }
  .about-page h1 { font-size: 24px; }
  .inquiry-grid { grid-template-columns: 1fr; gap: 20px; }
  .inquiry-intro { padding: 0 6px; }
  .inquiry-intro h2 { font-size: 24px; }
  .inquiry-form { grid-template-columns: 1fr; padding: 18px 15px; gap: 12px; }
  .package-card { min-height: 210px; }
  .package-image { width: 145px; min-width: 145px; height: 125px; margin: 0 auto 8px; }
  .form-field-wide { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; gap: 9px; }
  .form-actions .button { width: 100%; }
  .packaging-photo-wrap { right: 0; bottom: 8px; width: 145px; }
  .packaging-photo { max-height: 105px; }
  .lab-visual-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lab-visual-wide { grid-row: auto; }
  .lab-visual-card, .lab-visual-card img { min-height: 180px; height: 220px; }
}

/* Final small-screen overrides (loaded after the shared theme rules). */