:root {
    --teal: #42c1b8;
    --teal-dark: #179990;
    --violet: #615dad;
    --violet-dark: #37306f;
    --deep: #10162d;
    --ink: #172032;
    --muted: #5d6878;
    --line: #dfe8ee;
    --soft: #f5faf9;
    --white: #ffffff;
    --shadow: 0 14px 38px rgba(23, 32, 50, .10);
    --glow: 0 18px 46px rgba(66, 193, 184, .20);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: linear-gradient(180deg, #ffffff, #f9fcff 48%, #ffffff); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 10px clamp(18px, 4vw, 64px); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(66,193,184,.22); box-shadow: 0 10px 26px rgba(23,32,50,.07); }
.site-header:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--violet), var(--teal), var(--violet)); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 7px 14px 7px 8px; border-radius: 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(66,193,184,.16); box-shadow: 0 12px 30px rgba(23,32,50,.06); }
.brand img { width: 220px; height: 52px; object-fit: contain; object-position: left center; filter: drop-shadow(0 8px 14px rgba(23,32,50,.08)); }
.main-nav { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: 15px; font-weight: 700; }
.main-nav a { position: relative; padding: 10px 12px; border-radius: 8px; transition: color .2s ease, background .2s ease, transform .2s ease; }
.main-nav a:after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.main-nav a:hover { color: var(--violet-dark); background: rgba(66,193,184,.1); transform: translateY(-1px); }
.main-nav a:hover:after { transform: scaleX(1); }
.nav-check { display: none; }
.phone-icon { width: 22px; height: 22px; display: inline-block; flex: 0 0 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.1 2.75c.7-.34 1.53-.22 2.1.31l1.85 1.73c.56.52.75 1.32.48 2.03l-.82 2.17a1.4 1.4 0 0 0 .32 1.49l2.5 2.5c.4.4.99.52 1.5.32l2.15-.83c.72-.27 1.52-.08 2.04.48l1.72 1.86c.53.57.65 1.4.31 2.1-.63 1.3-1.78 2.84-3.5 3.31-2.86.8-7.2-1.15-10.77-4.72C3.4 11.92 1.48 7.61 2.26 4.75c.47-1.72 2-2.87 3.32-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.1 2.75c.7-.34 1.53-.22 2.1.31l1.85 1.73c.56.52.75 1.32.48 2.03l-.82 2.17a1.4 1.4 0 0 0 .32 1.49l2.5 2.5c.4.4.99.52 1.5.32l2.15-.83c.72-.27 1.52-.08 2.04.48l1.72 1.86c.53.57.65 1.4.31 2.1-.63 1.3-1.78 2.84-3.5 3.31-2.86.8-7.2-1.15-10.77-4.72C3.4 11.92 1.48 7.61 2.26 4.75c.47-1.72 2-2.87 3.32-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn:hover { transform: translateY(-2px); }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--white); border-radius: 4px; }
.nav-toggle span { display: block; height: 2px; margin: 6px 8px; background: var(--ink); }
.hero { position: relative; min-height: clamp(520px, calc(100vh - 76px), 660px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4.5vw, 58px) clamp(18px, 4vw, 64px); background: radial-gradient(circle at 78% 18%, rgba(66,193,184,.28), transparent 24%), linear-gradient(120deg, #f7fbff 0%, #effaf8 48%, #ffffff 100%); overflow: hidden; }
.hero:after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0)); pointer-events: none; }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.hero h1, .page-hero h1 { margin: 12px 0 18px; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: 0; color: var(--violet-dark); }
.hero p, .page-hero p { max-width: 660px; color: var(--muted); font-size: clamp(17px, 2vw, 20px); }
.hero-visual { position: relative; }
.hero-visual:before { content: ""; position: absolute; inset: 8% -8% -8% 20%; background: linear-gradient(135deg, rgba(66,193,184,.22), rgba(97,93,173,.14)); opacity: .22; border-radius: 50%; filter: blur(10px); }
.hero-visual img, .rounded-img { position: relative; border-radius: 8px; box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(255,255,255,.8); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.hero-visual img { transition: transform .25s ease, box-shadow .25s ease; box-shadow: var(--glow); }
.hero-visual:hover img { transform: translateY(-3px); }
.hero-orbit { position: absolute; right: 5vw; top: 18%; width: 420px; height: 420px; border: 1px solid rgba(97,93,173,.16); border-radius: 50%; }
.hero-orbit span { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 24px rgba(66,193,184,.8); }
.hero-orbit span:nth-child(1) { top: 12%; left: 18%; }
.hero-orbit span:nth-child(2) { right: 10%; top: 48%; background: var(--violet); }
.hero-orbit span:nth-child(3) { left: 42%; bottom: -6px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: 0; }
.eyebrow:before { content: ""; width: 34px; height: 3px; background: var(--teal); }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 12px 20px; border-radius: 4px; border: 1px solid transparent; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; cursor: pointer; position: relative; overflow: hidden; }
.btn:before { content: ""; position: absolute; inset: 0; transform: translateX(-105%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: transform .45s ease; }
.btn:hover:before { transform: translateX(105%); }
.btn.primary { background: var(--teal); color: #062a2d; box-shadow: 0 14px 28px rgba(66,193,184,.25); }
.btn.ghost { border-color: var(--violet); color: var(--violet-dark); background: transparent; }
.btn.light { background: var(--white); color: var(--violet-dark); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero-badges button { border: 1px solid rgba(97,93,173,.18); background: rgba(255,255,255,.78); color: var(--violet-dark); padding: 10px 12px; border-radius: 4px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 26px rgba(23,32,50,.08); transition: transform .2s ease, border-color .2s ease; }
.hero-badges button:hover { transform: translateY(-3px); border-color: var(--teal); }
.floating-spec { position: absolute; z-index: 3; min-width: 136px; padding: 13px 15px; border-radius: 8px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.85); }
.floating-spec strong { display: block; color: var(--violet); font-size: 24px; line-height: 1; }
.floating-spec span { color: var(--muted); font-weight: 800; font-size: 13px; }
.floating-spec.one { left: -26px; bottom: 18%; }
.floating-spec.two { right: 4%; top: 8%; animation-delay: 1.1s; }
.section { padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 64px); }
.section, .cta-band, .footer { content-visibility: auto; contain-intrinsic-size: 1px 620px; }
.page-hero { padding: clamp(20px, 2.8vw, 34px) clamp(18px, 4vw, 64px); }
.page-hero { background: radial-gradient(circle at 80% 20%, rgba(66,193,184,.18), transparent 28%), linear-gradient(120deg, #f7fbff, #eef9f8); }
.page-hero + .section { padding-top: clamp(12px, 2vw, 24px); }
.section + .section { padding-top: clamp(22px, 3vw, 38px); }
.page-hero h1 { max-width: 960px; }
.page-hero.product-detail { padding-top: clamp(18px, 2.5vw, 30px); padding-bottom: clamp(8px, 1.4vw, 18px); }
.page-hero.product-detail h1 { margin-bottom: 12px; font-size: clamp(38px, 4.5vw, 64px); }
.page-hero.product-detail p { margin: 0; }
.page-hero.product-detail + .section { align-items: start; padding-top: clamp(6px, 1vw, 12px); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); align-items: center; }
.two-col.align-start { align-items: start; }
.reverse img { order: 1; }
.muted { background: var(--soft); }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); padding: 1px; }
.strip button { border: 0; background: var(--white); padding: 28px; text-align: center; cursor: pointer; font: inherit; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.strip button:hover { transform: translateY(-5px); background: #fbffff; box-shadow: var(--shadow); z-index: 2; }
.strip strong { display: block; font-size: 34px; color: var(--violet); }
.strip span { color: var(--muted); font-weight: 700; }
.section-head { max-width: 760px; margin-bottom: 14px; }
.section h2 { margin: 8px 0 18px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; color: var(--violet-dark); }
.feature-grid, .product-grid, .blog-grid, .gallery-grid { display: grid; gap: 14px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.feature-grid article, .feature-grid button, .product-card, .contact-form, .contact-panel, .blog-card { background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 8px; padding: 24px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; text-align: left; font: inherit; color: inherit; }
.feature-grid button { cursor: pointer; position: relative; overflow: hidden; }
.feature-grid button:before, .product-card:before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(135deg, rgba(66,193,184,.12), rgba(97,93,173,.1)); transition: opacity .22s ease; pointer-events: none; }
.feature-grid article:hover, .feature-grid button:hover, .product-card:hover, .blog-card:hover, .contact-panel:hover, .contact-form:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(66,193,184,.55); background: #ffffff; }
.feature-grid button:hover:before, .product-card:hover:before { opacity: 1; }
.feature-grid button h3, .feature-grid button p, .feature-grid button span, .product-card span, .product-card p, .product-card em, .product-card small, .product-card img { position: relative; z-index: 1; }
.feature-grid button span { color: var(--teal-dark); font-weight: 900; }
.product-grid { grid-template-columns: repeat(4, 1fr); }
.product-grid.large { grid-template-columns: repeat(3, 1fr); }
.product-card { position: relative; overflow: hidden; min-height: 248px; display: flex; flex-direction: column; }
.product-thumb { width: calc(100% + 48px); max-width: none; margin: -24px -24px 20px; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); background: #f5faf9; transition: transform .3s ease; }
.product-card:hover .product-thumb { transform: scale(1.035); }
.product-card small { display: inline-flex; color: var(--teal-dark); font-weight: 900; text-transform: uppercase; font-size: 12px; margin-bottom: 10px; }
.product-card span { display: block; color: var(--violet-dark); font-size: 21px; font-weight: 900; margin-bottom: 10px; }
.product-card p { margin-bottom: 16px; }
.product-card em, .text-link { color: var(--teal-dark); font-weight: 900; font-style: normal; }
.product-card em { margin-top: auto; display: block; font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 22px; }
.tags span, .tags button, .check-list li { border: 1px solid var(--line); background: var(--white); border-radius: 4px; padding: 9px 13px; font-weight: 800; }
.tags button { cursor: pointer; color: var(--violet-dark); transition: transform .2s ease, background .2s ease, color .2s ease; }
.tags button:hover { transform: translateY(-3px); background: var(--violet); color: var(--white); }
.check-list { display: grid; gap: 9px; padding: 0; list-style: none; }
.check-list li { position: relative; display: flex; align-items: center; gap: 10px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.check-list li:hover { transform: translateX(4px); border-color: rgba(66,193,184,.55); box-shadow: 0 10px 24px rgba(23,32,50,.07); }
.check-list li:before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--violet)); box-shadow: 0 4px 10px rgba(66,193,184,.18); }
.check-list li:after { content: ""; position: absolute; left: 5px; width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.spec-box { display: grid; gap: 6px; padding: 15px; border-radius: 8px; border: 1px solid rgba(66,193,184,.35); background: linear-gradient(135deg, rgba(66,193,184,.12), rgba(97,93,173,.08)); margin: 16px 0; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.spec-box:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(23,32,50,.10); border-color: var(--teal); }
.spec-box strong { color: var(--violet-dark); }
.product-detail-img { background: #f5faf9; object-fit: cover; padding: 0; }
.rounded-img:hover, .product-detail-img:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--glow); border-color: rgba(66,193,184,.75); }
.process-band { background: var(--deep); color: var(--white); overflow: hidden; position: relative; }
.process-band:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(66,193,184,.14), transparent 34%, rgba(97,93,173,.18)); }
.process-band .section-head, .process-track { position: relative; }
.process-band h2 { color: var(--white); }
.process-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.process-track:before { content: ""; position: absolute; left: 8%; right: 8%; top: 38px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--violet)); }
.process-track button { position: relative; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--white); border-radius: 8px; min-height: 150px; padding: 22px; text-align: left; font: inherit; cursor: pointer; backdrop-filter: blur(8px); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.process-track button:hover { transform: translateY(-8px); background: rgba(255,255,255,.14); border-color: var(--teal); }
.process-track strong { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--teal); color: #062a2d; margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(66,193,184,.12); }
.process-track span { display: block; font-weight: 900; font-size: 18px; }
.cta-band { margin: 0; padding: clamp(28px, 4vw, 46px) clamp(18px, 4vw, 64px); background: linear-gradient(120deg, var(--violet-dark), var(--violet)); color: var(--white); text-align: center; }
.cta-band h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 48px); }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.gallery-item { position: relative; overflow: hidden; margin: 0; border-radius: 8px; box-shadow: var(--shadow); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px; border-radius: 4px; background: rgba(23,32,50,.84); color: var(--white); font-weight: 900; }
.gallery-item span { display: block; color: var(--teal); font-size: 12px; text-transform: uppercase; }
.blog-grid { grid-template-columns: repeat(3, 1fr); }
.blog-card { overflow: hidden; padding: 0; }
.blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card div { padding: 22px; }
.blog-card h2 { font-size: 22px; }
time { color: var(--teal-dark); font-weight: 800; font-size: 13px; }
.article { max-width: 980px; margin: auto; }
.article img { width: 100%; border-radius: 8px; margin-bottom: 16px; box-shadow: var(--shadow); }
.contact-form { display: grid; gap: 14px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 14px 15px; font: inherit; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(66,193,184,.35); border-color: var(--teal); }
textarea { min-height: 130px; resize: vertical; }
.phone-field { display: grid; grid-template-columns: minmax(126px, .34fr) minmax(0, 1fr); gap: 10px; }
.phone-field select, .phone-field input { min-width: 0; }
.compact-form { gap: 10px; padding: 20px; }
.compact-form h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 38px); }
.compact-form input, .compact-form textarea, .compact-form select { padding: 11px 13px; min-height: 42px; }
.compact-form textarea { min-height: 90px; }
.compact-form .btn { min-height: 42px; padding: 10px 16px; }
.captcha-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; }
.captcha-row label { min-height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: linear-gradient(135deg, rgba(66,193,184,.16), rgba(97,93,173,.12)); color: var(--violet-dark); font-weight: 900; border: 1px solid var(--line); }
.form-error { margin: 0; padding: 9px 11px; border-radius: 4px; background: #fee2e2; color: #991b1b; font-weight: 800; }
.contact-panel iframe { width: 100%; height: 260px; border: 0; border-radius: 8px; margin-top: 18px; }
.timeline { display: grid; gap: 14px; }
.timeline div { position: relative; display: flex; gap: 18px; align-items: center; padding: 18px; background: linear-gradient(90deg, #ffffff, #fbffff); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease; }
.timeline div:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--teal), var(--violet)); transform: scaleY(.25); opacity: 0; transform-origin: center; transition: transform .24s ease, opacity .24s ease; }
.timeline div:after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(66,193,184,.12) 45%, transparent 72%); transform: translateX(-110%); transition: transform .45s ease; pointer-events: none; }
.timeline div:hover { transform: translateX(8px) translateY(-3px); border-color: rgba(66,193,184,.58); box-shadow: 0 18px 42px rgba(23,32,50,.11); background: #ffffff; }
.timeline div:hover:before { transform: scaleY(1); opacity: 1; }
.timeline div:hover:after { transform: translateX(110%); }
.timeline strong { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; color: var(--teal-dark); font-size: 24px; background: rgba(66,193,184,.12); transition: transform .24s ease, background .24s ease, color .24s ease; }
.timeline span { position: relative; z-index: 1; transition: transform .24s ease, color .24s ease; }
.timeline div:hover strong { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--teal), var(--violet)); color: #ffffff; }
.timeline div:hover span { transform: translateX(2px); color: var(--violet-dark); }
.footer { display: grid; grid-template-columns: 1.25fr .85fr 1.25fr; gap: 42px; align-items: start; padding: 38px clamp(18px, 4vw, 64px); background: #111827; color: #dce4ed; border-top: 10px solid var(--violet); }
.footer > div { min-width: 0; }
.footer > div:first-child p:not(.footer-gstin) { max-width: 390px; margin-top: 18px; color: #eef8f8; font-size: 17px; line-height: 1.7; border-left: 4px solid var(--teal); padding-left: 16px; }
.footer-gstin { display: inline-flex; gap: 6px; align-items: center; margin: 16px 0 0; padding: 9px 12px; border-radius: 6px; background: rgba(66,193,184,.12); color: #f7ffff; border: 1px solid rgba(66,193,184,.28); }
.footer a { display: block; margin: 8px 0; color: #f7ffff; }
.footer-logo { width: 260px; height: 92px; object-fit: contain; object-position: left; background: #fff; border-radius: 6px; padding: 10px; }
.socials { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.social-link { width: 42px; height: 42px; display: grid !important; place-items: center; margin: 0 !important; border-radius: 50%; color: #fff !important; box-shadow: 0 14px 26px rgba(0,0,0,.22); transition: transform .2s ease, box-shadow .2s ease; }
.social-link:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0,0,0,.28); }
.social-link i { font-style: normal; font-weight: 900; font-size: 18px; line-height: 1; color: #fff; }
.social-link.facebook { background: linear-gradient(135deg, #1877f2, #615dad); }
.social-link.linkedin { background: linear-gradient(135deg, #0a66c2, #179990); }
.social-link.instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.social-link.location { background: linear-gradient(135deg, #42c1b8, #615dad); }
.float-actions i:before, .social-link i:before { content: ""; display: block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icofont-ui-call { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.5c.7-.4 1.6-.2 2.1.4l2 2.4c.4.5.5 1.2.2 1.8l-1.1 2.2c.8 1.6 2.1 3 3.8 3.8l2.2-1.1c.6-.3 1.3-.2 1.8.2l2.4 2c.6.5.8 1.4.4 2.1-.9 1.8-2.6 3.7-4.8 3.7C9 20 4 15 4 8.4c0-2.2 1.9-3.9 2.6-5.9Z'/%3E%3C/svg%3E"); }
.icofont-whatsapp { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.3A9.5 9.5 0 0 0 3.9 16.8L3 21l4.3-1.1A9.5 9.5 0 1 0 12 2.3Zm0 1.8a7.7 7.7 0 0 1 0 15.4c-1.4 0-2.7-.4-3.8-1l-.3-.2-2.5.7.6-2.4-.2-.4A7.7 7.7 0 0 1 12 4.1Zm-3.3 3.7c-.2 0-.5.1-.7.3-.4.4-.9 1-.9 2.1 0 1.2.9 2.3 1 2.5.1.1 1.7 2.8 4.2 3.8 2.1.8 2.5.6 3 .6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.5-.3l-1.7-.8c-.3-.1-.5-.1-.7.2l-.7.9c-.1.2-.3.2-.6.1-1.5-.8-2.6-1.6-3.3-3.3-.1-.2 0-.4.1-.5l.5-.6c.2-.2.2-.4.3-.5.1-.2 0-.4 0-.6l-.8-1.8c-.2-.5-.4-.5-.7-.5h-.3Z'/%3E%3C/svg%3E"); }
.icofont-paper-plane { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.6 3.2c.3.3.4.7.2 1.1l-7 16.5c-.2.5-.7.8-1.2.7-.5 0-.9-.4-1-.9l-1.5-5.8-5.8-1.5c-.5-.1-.8-.5-.9-1 0-.5.2-1 .7-1.2l16.5-7c.4-.2.8-.1 1 .1ZM8.2 12l4.1 1.1c.4.1.7.4.8.8l1.1 4.1 4.6-10.9L8.2 12Z'/%3E%3C/svg%3E"); }
.icofont-facebook { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.2 8.3V6.9c0-.7.5-.9.9-.9h2.2V2.3h-3c-3.4 0-4.2 2.5-4.2 4.2v1.8H7.4v3.8h2.7v9.6h4.1v-9.6h3.1l.5-3.8h-3.6Z'/%3E%3C/svg%3E"); }
.icofont-linkedin { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 8.8H2.7v12.4h3.5V8.8ZM4.4 2.8a2 2 0 1 0 0 4.1 2 2 0 0 0 0-4.1Zm16.9 11.4c0-3.4-1.8-5.6-4.6-5.6-1.9 0-3 .9-3.6 1.9V8.8H9.7v12.4h3.5v-6.4c0-1.7.9-2.8 2.3-2.8 1.3 0 2.2 1 2.2 2.8v6.4h3.6v-7Z'/%3E%3C/svg%3E"); }
.icofont-instagram { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 2.7h9.6c2.5 0 4.5 2 4.5 4.5v9.6c0 2.5-2 4.5-4.5 4.5H7.2c-2.5 0-4.5-2-4.5-4.5V7.2c0-2.5 2-4.5 4.5-4.5Zm0 2A2.5 2.5 0 0 0 4.7 7.2v9.6a2.5 2.5 0 0 0 2.5 2.5h9.6a2.5 2.5 0 0 0 2.5-2.5V7.2a2.5 2.5 0 0 0-2.5-2.5H7.2Zm4.8 3.1a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4Zm0 2a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4Zm5.1-2.4a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Z'/%3E%3C/svg%3E"); }
.icofont-location-pin { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.5a7.2 7.2 0 0 0-7.2 7.2c0 5.4 7.2 11.8 7.2 11.8s7.2-6.4 7.2-11.8A7.2 7.2 0 0 0 12 2.5Zm0 9.8a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2Z'/%3E%3C/svg%3E"); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 13px clamp(18px, 4vw, 64px); background: #0b1220; color: #dce4ed; font-size: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom a { color: var(--teal); font-weight: 900; }
.float-actions { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: grid; z-index: 60; border-radius: 10px 0 0 10px; overflow: hidden; box-shadow: 0 20px 44px rgba(23,32,50,.22); }
.float-actions a { width: 86px; min-height: 78px; display: grid; place-items: center; gap: 6px; padding: 11px 8px; color: #fff; font-size: 13px; font-weight: 900; text-align: center; border-left: 1px solid rgba(255,255,255,.18); transition: transform .22s ease, filter .22s ease, box-shadow .22s ease; }
.float-actions a:hover { filter: brightness(1.08); transform: translateX(-5px); box-shadow: inset 4px 0 0 rgba(255,255,255,.28); }
.float-actions i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 21px; line-height: 1; }
.float-actions span { line-height: 1.15; }
.float-call { background: linear-gradient(135deg, var(--violet), var(--violet-dark)); }
.float-whatsapp { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); }
.float-enquiry { background: linear-gradient(135deg, var(--teal-dark), var(--violet)); }
.lead-popup { position: fixed; inset: 0; background: rgba(17,24,39,.62); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 90; }
.lead-popup.show { display: flex; }
.popup-card { position: relative; max-width: 390px; width: 100%; background: var(--white); border-radius: 8px; padding: 20px 22px; box-shadow: var(--shadow); }
.popup-card [data-popup-close] { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; background: var(--ink); color: var(--white); border-radius: 4px; }
.popup-card h2 { margin: 0 36px 10px 0; font-size: 24px; line-height: 1.16; color: var(--ink); }
.popup-card p { margin: 0 0 14px; line-height: 1.45; }
.popup-card form { display: grid; gap: 9px; }
.popup-card input, .popup-card textarea, .popup-card select { min-height: 40px; padding: 9px 12px; }
.popup-card textarea { min-height: 82px; }
.popup-card .phone-field { gap: 8px; grid-template-columns: 126px minmax(0, 1fr); }
.popup-card .captcha-row { grid-template-columns: 110px minmax(0, 1fr); gap: 9px; }
.popup-card .captcha-row label { min-height: 40px; }
.popup-card .btn { min-height: 42px; padding: 10px 14px; }
.detail-modal { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(16,22,45,.72); backdrop-filter: blur(8px); }
.detail-modal.show { display: flex; }
.detail-dialog { position: relative; width: min(560px, 100%); border-radius: 8px; padding: 30px; background: #ffffff; box-shadow: var(--shadow); transform: translateY(18px) scale(.98); animation: modalIn .22s ease forwards; }
.detail-dialog [data-detail-close] { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 4px; background: var(--deep); color: var(--white); cursor: pointer; }
.detail-dialog h2 { margin: 12px 0; color: var(--violet-dark); font-size: 30px; }
.detail-dialog p { color: var(--muted); font-size: 17px; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 980px) {
    .nav-toggle { display: block; }
    .main-nav { position: fixed; left: 18px; right: 18px; top: 88px; display: none; flex-direction: column; align-items: stretch; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
    .main-nav.open { display: flex; }
    .hero, .two-col, .footer { grid-template-columns: 1fr; }
    .hero { min-height: auto; }
    .product-grid, .product-grid.large, .blog-grid, .gallery-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .strip { grid-template-columns: repeat(2, 1fr); }
    .process-track { grid-template-columns: repeat(2, 1fr); }
    .process-track:before, .hero-orbit, .hero-visual:before { display: none; }
}
@media (max-width: 620px) {
    .brand img { width: 176px; height: 52px; }
    .site-header { padding: 10px 14px; }
    .hero, .section, .page-hero { padding-left: 16px; padding-right: 16px; }
    .product-grid, .product-grid.large, .blog-grid, .gallery-grid, .feature-grid, .strip, .process-track { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
    .btn { width: 100%; }
    .float-actions { top: auto; left: 12px; right: 12px; bottom: 12px; transform: none; grid-template-columns: repeat(3, 1fr); border-radius: 8px; }
    .float-actions a { width: auto; min-height: 58px; padding: 8px 6px; font-size: 12px; border-left: 0; }
    .float-actions i { width: 28px; height: 28px; font-size: 18px; }
    .phone-field { grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
    .floating-spec { position: relative; left: auto; right: auto; top: auto; bottom: auto; display: inline-grid; margin: 10px 6px 0 0; }
    .footer-bottom { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}
@keyframes breathe { 0%, 100% { transform: scale(.98); opacity: .18; } 50% { transform: scale(1.04); opacity: .28; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulseLine { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes modalIn { to { transform: translateY(0) scale(1); } }

/* Performance mode for live hosting: low-paint UI, no heavy motion. */
.site-header { backdrop-filter: none; box-shadow: 0 4px 14px rgba(23,32,50,.06); }
.brand, .brand img, .hero-visual img, .rounded-img, .product-card, .feature-grid article, .feature-grid button, .contact-form, .contact-panel, .blog-card, .gallery-item, .timeline div, .social-link, .float-actions { box-shadow: none; filter: none; }
.hero { min-height: auto; padding-top: clamp(22px, 3vw, 42px); padding-bottom: clamp(22px, 3vw, 42px); background: linear-gradient(120deg, #f7fbff 0%, #effaf8 58%, #ffffff 100%); }
.hero:after, .hero-visual:before, .hero-orbit, .floating-spec, .process-track:before, .timeline div:after { display: none; }
.hero-visual img, .hero-visual:hover img, .rounded-img:hover, .product-detail-img:hover, .product-card:hover, .feature-grid article:hover, .feature-grid button:hover, .blog-card:hover, .contact-panel:hover, .contact-form:hover, .strip button:hover, .tags button:hover, .check-list li:hover, .spec-box:hover, .process-track button:hover, .gallery-item:hover img, .timeline div:hover, .timeline div:hover strong, .timeline div:hover span, .social-link:hover, .float-actions a:hover { transform: none; }
.btn:before, .feature-grid button:before, .product-card:before, .timeline div:before { display: none; }
.btn, .main-nav a, .hero-badges button, .strip button, .feature-grid article, .feature-grid button, .product-card, .product-thumb, .tags button, .check-list li, .spec-box, .process-track button, .gallery-item img, .timeline div, .timeline strong, .timeline span, .social-link, .float-actions a, .hero-visual img, .rounded-img { transition: none; }
.process-track button { backdrop-filter: none; min-height: 126px; }
.detail-modal { backdrop-filter: none; background: rgba(16,22,45,.58); }
.detail-dialog { transform: none; animation: none; }
.reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
@media (max-width: 980px) {
    .site-header { position: sticky; top: 0; flex-wrap: wrap; align-items: center; z-index: 90; }
    .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
    .nav-toggle span { width: 22px; height: 2px; margin: 0; border-radius: 999px; }
    .main-nav { order: 3; position: static; left: auto; right: auto; top: auto; width: 100%; display: none; margin: 4px 0 0; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 30px rgba(23,32,50,.12); }
    .main-nav.open, .site-header.menu-open .main-nav, .nav-check:checked ~ .main-nav { display: flex; }
    .main-nav a { padding: 11px 12px; }
}