/* =========================================================
   AKSHAYA LABTECH — PREMIUM GLASSMORPHIC THEME
   Drop this file beside index.php.
   Existing asset paths are intentionally preserved.
   ========================================================= */

:root{
    --ink:#1c1730;
    --muted:#6d6880;
    --purple:#452a7a;
    --purple-2:#6f4cb4;
    --lavender:#f3effb;
    --white:#ffffff;
    --line:rgba(69,42,122,.13);
    --glass:rgba(255,255,255,.68);
    --shadow:0 24px 70px rgba(49,32,84,.11);
    --radius:28px;
    --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--ink);
    background:
        radial-gradient(circle at 8% 8%,rgba(126,91,190,.12),transparent 28%),
        radial-gradient(circle at 92% 26%,rgba(85,146,218,.10),transparent 25%),
        #fbfaff;
    font-family:"DM Sans",sans-serif;
    line-height:1.65;
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        linear-gradient(120deg,transparent 0 46%,rgba(69,42,122,.025) 50%,transparent 54%),
        radial-gradient(circle at 50% 100%,rgba(69,42,122,.045),transparent 38%);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}

.site-bg{
    position:fixed;
    width:700px;height:700px;
    right:-260px;top:100px;
    opacity:.045;
    background:url("pics/logo.png") center/contain no-repeat;
    pointer-events:none;
    z-index:-1;
    filter:grayscale(1);
}

.container{width:min(var(--container),calc(100% - 48px));margin:auto}
.section{padding:78px 0}
.section.compact{padding-top:60px;padding-bottom:60px}

.site-header{
    position:fixed;
    left:0;right:0;top:0;
    z-index:1000;
    padding:14px 0;
    transition:.35s ease;
}
.nav-shell{
    width:min(1220px,calc(100% - 32px));
    margin:auto;
    display:flex;
    align-items:center;
    gap:26px;
    padding:10px 14px 10px 18px;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.48);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-radius:20px;
    box-shadow:0 12px 40px rgba(48,29,83,.07);
    transition:.35s ease;
}
.site-header.scrolled .nav-shell{
    background:rgba(255,255,255,.82);
    box-shadow:0 18px 50px rgba(48,29,83,.12);
}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand img{width:45px;height:45px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand strong{font:800 14px/1 "Manrope",sans-serif;letter-spacing:.12em;color:var(--purple)}
.brand small{font:700 9px/1 "Manrope",sans-serif;letter-spacing:.34em;color:#817b91;margin-top:5px}
.main-nav{display:flex;align-items:center;justify-content:center;gap:7px;margin-left:auto}
.main-nav a{
    padding:9px 14px;
    border-radius:12px;
    color:#615b72;
    font-size:13px;
    font-weight:700;
    transition:.25s ease;
}
.main-nav a:hover,.main-nav a.active{color:var(--purple);background:rgba(69,42,122,.07)}
.nav-cta,.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border-radius:14px;
    font-weight:800;
    font-size:13px;
    transition:.28s ease;
}
.nav-cta{padding:12px 17px;background:var(--purple);color:#fff;box-shadow:0 10px 24px rgba(69,42,122,.22)}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(69,42,122,.28)}
.menu-toggle{display:none;border:0;background:transparent;color:var(--purple);font-size:24px}

.hero{
    min-height:760px;
    padding-top:150px;
    position:relative;
    display:flex;align-items:center;
}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:50px}
.eyebrow{
    display:flex;align-items:center;gap:10px;
    color:var(--purple);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:10px;
    font-weight:800;
}
.eyebrow span{width:28px;height:1px;background:var(--purple);display:inline-block}
.hero h1,.section-heading h2,.contact-copy h2{
    font-family:"Manrope",sans-serif;
    letter-spacing:-.055em;
    line-height:1.04;
    margin:20px 0;
}
.hero h1{font-size:clamp(46px,6vw,76px);font-weight:800}
.hero h1 em,.section-heading h2 em,.contact-copy h2 em{font-style:normal;color:var(--purple)}
.hero-lead{max-width:620px;color:var(--muted);font-size:17px;line-height:1.75;margin:0}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.btn{padding:15px 20px;border:0}
.btn-primary{background:linear-gradient(135deg,#452a7a,#6947a5);color:#fff;box-shadow:0 12px 30px rgba(69,42,122,.22)}
.text-link{color:var(--purple);font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:9px}
.text-link i{transition:.25s}
.text-link:hover i{transform:translateX(4px)}
.hero-proof{display:flex;gap:30px;margin-top:50px;padding-top:22px;border-top:1px solid var(--line)}
.hero-proof div{display:flex;flex-direction:column}
.hero-proof strong{font:800 22px/1 "Manrope";color:var(--purple)}
.hero-proof span{font-size:10px;color:#858093;text-transform:uppercase;letter-spacing:.09em;margin-top:7px}

.hero-visual{min-height:510px;display:grid;place-items:center}
.glass-stage{
    width:min(470px,100%);height:470px;
    position:relative;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 45%,rgba(255,255,255,.96),rgba(241,235,251,.7) 48%,rgba(226,215,246,.35) 70%,transparent 71%);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:inset 0 0 80px rgba(255,255,255,.9),0 35px 90px rgba(63,39,104,.14);
}
.stage-glow{position:absolute;inset:22%;border-radius:50%;background:rgba(111,76,180,.12);filter:blur(35px)}
.stage-logo{position:absolute;inset:0;display:grid;place-items:center}
.stage-logo img{width:145px;opacity:.86;filter:drop-shadow(0 12px 20px rgba(69,42,122,.14))}
.orbit{position:absolute;inset:8%;border:1px dashed rgba(69,42,122,.18);border-radius:50%;animation:spin 22s linear infinite}
.orbit-2{inset:19%;animation-duration:16s;animation-direction:reverse}
.stage-dots{position:absolute;inset:0}
.stage-dots:before,.stage-dots:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#7b5ab4;box-shadow:0 0 0 8px rgba(123,90,180,.10)}
.stage-dots:before{top:13%;right:24%}.stage-dots:after{bottom:17%;left:22%}
.floating-card{
    position:absolute;
    display:grid;grid-template-columns:auto 1fr;
    column-gap:10px;
    padding:12px 15px;
    min-width:168px;
    border:1px solid rgba(255,255,255,.85);
    border-radius:17px;
    background:rgba(255,255,255,.68);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 40px rgba(54,34,90,.12);
    animation:float 5s ease-in-out infinite;
}
.floating-card i{grid-row:span 2;color:var(--purple);font-size:18px}
.floating-card span{font-weight:800;font-size:12px}
.floating-card small{color:#8a8398;font-size:9px}
.card-a{top:13%;left:-5%}.card-b{right:-7%;top:43%;animation-delay:-1.5s}.card-c{bottom:10%;left:6%;animation-delay:-3s}

.scroll-cue{
    position:absolute;bottom:25px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:5px;
    color:#817b91;font-size:9px;text-transform:uppercase;letter-spacing:.18em;
}
.scroll-cue i{font-size:16px;animation:bounce 1.8s infinite}

.section-heading h2{font-size:clamp(38px,5vw,60px);font-weight:800}
.section-heading p{color:var(--muted);max-width:590px;margin:0 auto}
.section-heading.centered{text-align:center}.section-heading.centered .eyebrow{justify-content:center}

.intro-grid{display:grid;grid-template-columns:320px 1fr;gap:65px;align-items:center}
.founder-panel{padding:14px;border-radius:24px}
.founder-photo{height:350px;overflow:hidden;border-radius:18px;background:#eee}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-meta{padding:16px 7px 8px;display:flex;flex-direction:column}
.founder-meta strong{font:800 16px "Manrope"}.founder-meta span{font-size:11px;color:#837d90;margin-top:3px}
.intro-copy{max-width:720px}.lead-copy{font:600 20px/1.65 "Manrope";color:#3d3650}.intro-copy p{color:var(--muted);font-size:14px}.intro-copy .text-link{margin-top:10px}

.glass{background:var(--glass);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.solution-card{position:relative;min-height:300px;padding:24px;border-radius:22px;overflow:hidden;transition:.35s ease}
.solution-card:before{content:"";position:absolute;width:120px;height:120px;right:-55px;top:-55px;background:rgba(105,70,165,.08);border-radius:50%;transition:.35s}
.solution-card:hover{transform:translateY(-7px);box-shadow:0 30px 65px rgba(49,32,84,.15)}
.solution-card:hover:before{transform:scale(1.6)}
.number{font:700 10px "Manrope";color:#a19aa9;letter-spacing:.1em}
.icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(69,42,122,.08);color:var(--purple);font-size:20px;margin:30px 0 22px}
.solution-card h3{font:800 18px/1.25 "Manrope";margin:0 0 10px}.solution-card p{font-size:12px;color:var(--muted);line-height:1.7}.solution-card a{position:absolute;bottom:23px;color:var(--purple);font-size:11px;font-weight:800;display:flex;gap:8px;align-items:center}

.statement-box{position:relative;max-width:930px;margin:auto;padding:48px 60px;border-radius:28px;text-align:center;overflow:hidden}
.statement-box:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(69,42,122,.06),transparent 60%);pointer-events:none}
.statement-mark{font:800 60px/1 "Manrope";color:rgba(69,42,122,.2)}
.statement-box p{position:relative;font:600 clamp(20px,3vw,30px)/1.45 "Manrope";letter-spacing:-.03em;max-width:780px;margin:5px auto 24px}
.statement-line{width:38px;height:2px;background:var(--purple);margin:auto}.statement-box span{display:block;margin-top:10px;color:#817b91;font-size:10px;text-transform:uppercase;letter-spacing:.15em;font-weight:800}

.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.partner-card{min-height:330px;border-radius:24px;position:relative;overflow:hidden;transition:.35s ease}
.partner-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:38px;filter:drop-shadow(0 18px 20px rgba(45,28,76,.10));transition:.5s ease}
.partner-card:after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(25,18,42,.82));z-index:1}
.partner-content{position:absolute;z-index:2;left:21px;right:21px;bottom:20px;color:#fff}
.partner-content span{font:700 9px "Manrope";opacity:.7}.partner-content h3{font:800 21px "Manrope";margin:3px 0}.partner-content p{font-size:10px;opacity:.8;margin:0;max-width:190px;text-transform:capitalize}.partner-content i{position:absolute;right:0;bottom:2px;font-size:18px}
.partner-card:hover{transform:translateY(-8px);box-shadow:0 30px 65px rgba(49,32,84,.18)}.partner-card:hover img{transform:scale(1.07)}

.contact-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;padding:45px;border-radius:30px}
.contact-copy h2{font-size:clamp(38px,4.5vw,58px);margin:18px 0}.contact-copy>p{color:var(--muted);max-width:450px;font-size:14px}
.contact-details{display:grid;gap:15px;margin-top:28px}
.contact-details a,.contact-details div{display:flex;align-items:flex-start;gap:13px;color:#4e485e;font-size:12px}
.contact-details i{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:rgba(69,42,122,.08);color:var(--purple)}
.contact-details span{display:flex;flex-direction:column}.contact-details small{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#9a93a5;margin-bottom:2px}
.contact-form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:grid;gap:7px}.contact-form label>span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#736d80}
.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(69,42,122,.12);outline:0;background:rgba(255,255,255,.62);border-radius:13px;padding:13px 14px;color:var(--ink);transition:.25s}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(69,42,122,.45);box-shadow:0 0 0 4px rgba(69,42,122,.06)}
.contact-form textarea{resize:vertical;min-height:125px}.form-status{font-size:11px;color:var(--purple);margin:0}

.map-section{height:310px;overflow:hidden;margin-top:10px;filter:saturate(.55) contrast(.94)}
.map-section iframe{width:100%;height:100%;border:0}

.site-footer{padding:45px 0;background:#201936;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr auto;gap:35px;align-items:end}.footer-brand strong{color:#fff}.footer-brand small{color:#a59db8}.site-footer p{color:#aaa2b7;max-width:380px;font-size:12px;margin:16px 0 0}.footer-links{display:flex;gap:17px;flex-wrap:wrap}.footer-links a{color:#c3bbd0;font-size:11px}.footer-links a:hover{color:#fff}.footer-end{font-size:10px;color:#888095;white-space:nowrap}

.back-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:0;border-radius:14px;background:var(--purple);color:#fff;display:grid;place-items:center;z-index:900;box-shadow:0 12px 30px rgba(69,42,122,.25);opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s}.back-top.visible{opacity:1;pointer-events:auto;transform:none}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.is-visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

.hero-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.orb-one{width:240px;height:240px;left:-110px;top:170px;background:rgba(112,78,175,.09)}
.orb-two{width:180px;height:180px;right:5%;bottom:6%;background:rgba(68,140,213,.08)}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

@media(max-width:1000px){
    .hero-grid{grid-template-columns:1fr}.hero{padding-top:140px}.hero-visual{min-height:430px}
    .solution-grid,.partner-grid{grid-template-columns:repeat(2,1fr)}
    .intro-grid{grid-template-columns:260px 1fr;gap:35px}
    .contact-shell{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}.footer-end{grid-column:1/-1}
}
@media(max-width:760px){
    .container{width:min(var(--container),calc(100% - 30px))}
    .section{padding:60px 0}.section.compact{padding:45px 0}
    .nav-shell{padding:8px 10px 8px 14px}.menu-toggle{display:block;margin-left:auto}.nav-cta{display:none}
    .main-nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;padding:10px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border-radius:18px;box-shadow:var(--shadow)}
    .main-nav.open{display:flex}.main-nav a{text-align:center;padding:13px}
    .hero{min-height:auto;padding-top:125px;padding-bottom:75px}.hero h1{font-size:46px}.hero-lead{font-size:15px}.hero-proof{gap:18px;flex-wrap:wrap}.hero-proof strong{font-size:19px}
    .hero-visual{min-height:360px}.glass-stage{width:330px;height:330px}.stage-logo img{width:100px}.floating-card{min-width:135px;padding:9px 11px}.card-a{left:-6%}.card-b{right:-5%}.card-c{bottom:2%;left:2%}
    .scroll-cue{display:none}
    .intro-grid{grid-template-columns:1fr}.founder-panel{max-width:330px;margin:auto}.founder-photo{height:300px}
    .solution-grid,.partner-grid{grid-template-columns:1fr}.solution-card{min-height:260px}.partner-card{min-height:300px}
    .statement-box{padding:35px 24px}.contact-shell{padding:28px 20px}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-end{grid-column:auto;white-space:normal}
    .site-bg{width:500px;height:500px;right:-250px;top:180px}
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
}
```css
/* =========================================================
   AKSHAYA LABTECH — PREMIUM ABOUT PAGE
   Glassmorphism / Modern Scientific / Responsive
   ========================================================= */

:root {
    --about-purple: #422778;
    --about-purple-light: #7254a6;
    --about-dark: #211a35;
    --about-text: #625c70;
    --about-light: #f8f6fc;
    --about-border: rgba(66, 39, 120, 0.12);
    --about-glass: rgba(255, 255, 255, 0.68);
    --about-shadow: 0 25px 70px rgba(45, 27, 78, 0.11);
}

/* ---------------------------------------------------------
   PAGE BACKGROUND
   --------------------------------------------------------- */

body {
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(105, 72, 165, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 32%,
            rgba(85, 142, 207, 0.08),
            transparent 28%
        ),
        #fbfaff;
}

.about-page {
    position: relative;
    overflow: hidden;
}

.about-page::before {
    content: "";
    position: fixed;
    width: 620px;
    height: 620px;
    right: -250px;
    top: 150px;
    background: url("../../pics/logo.png") center / contain no-repeat;
    opacity: 0.035;
    filter: grayscale(1);
    pointer-events: none;
    z-index: -1;
}


/* ---------------------------------------------------------
   ABOUT HERO
   --------------------------------------------------------- */

.about-hero {
    position: relative;
    min-height: 470px;
    padding: 165px 0 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -220px;
    top: 80px;
    border-radius: 50%;
    background: rgba(91, 55, 145, 0.07);
    filter: blur(5px);
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -240px;
    top: -40px;
    background: url("../../pics/logo.png") center / contain no-repeat;
    opacity: 0.045;
    filter: grayscale(1);
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--about-purple);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.about-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--about-purple);
}

.about-hero h1 {
    margin: 20px 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.065em;
    color: var(--about-dark);
}

.about-hero h1 span {
    color: var(--about-purple);
}

.about-hero-description {
    max-width: 700px;
    margin: 0;
    color: var(--about-text);
    font-size: 16px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   MAIN ABOUT SECTION
   --------------------------------------------------------- */

.about-story {
    padding: 55px 0 65px;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 70px;
    align-items: center;
}


/* ---------------------------------------------------------
   FOUNDER CARD
   --------------------------------------------------------- */

.about-founder {
    position: relative;
    padding: 14px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: var(--about-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--about-shadow);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.about-founder:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 80px rgba(45, 27, 78, 0.17);
}

.about-founder-image {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 21px;
    background: #eeeaf4;
}

.about-founder-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(28, 19, 47, 0.13)
        );
    pointer-events: none;
}

.about-founder-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.about-founder:hover .about-founder-image img {
    transform: scale(1.045);
}

.about-founder-details {
    padding: 18px 8px 7px;
}

.about-founder-details strong {
    display: block;
    color: var(--about-dark);
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.about-founder-details span {
    display: block;
    margin-top: 4px;
    color: #898295;
    font-size: 11px;
}


/* ---------------------------------------------------------
   STORY CONTENT
   --------------------------------------------------------- */

.about-story-content {
    max-width: 760px;
}

.about-story-content h2 {
    margin: 17px 0 20px;
    color: var(--about-dark);
    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 4vw, 53px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.055em;
}

.about-story-content h2 span {
    color: var(--about-purple);
}

.about-lead {
    margin: 0 0 20px;
    color: #3d354f;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 600;
}

.about-story-content p:not(.about-lead) {
    margin: 0 0 17px;
    color: var(--about-text);
    font-size: 14px;
    line-height: 1.85;
}

.about-divider {
    width: 100%;
    height: 1px;
    margin: 30px 0;
    background: var(--about-border);
}


/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.about-stat {
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
    transition: 0.3s ease;
}

.about-stat:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 40px rgba(49, 30, 84, 0.08);
}

.about-stat strong {
    display: block;
    color: var(--about-purple);
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}

.about-stat span {
    display: block;
    margin-top: 8px;
    color: #837c90;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   VISION & MISSION
   --------------------------------------------------------- */

.about-direction {
    padding: 55px 0;
}

.about-section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

.about-section-heading .about-eyebrow {
    justify-content: center;
}

.about-section-heading h2 {
    margin: 17px 0 12px;
    color: var(--about-dark);
    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.about-section-heading h2 span {
    color: var(--about-purple);
}

.about-section-heading p {
    margin: 0 auto;
    color: var(--about-text);
    font-size: 13px;
    line-height: 1.8;
}

.about-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 38px;
}

.about-vm-card {
    position: relative;
    min-height: 270px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 25px;
    background: var(--about-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--about-shadow);
    transition: 0.35s ease;
}

.about-vm-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(66, 39, 120, 0.065);
    transition: 0.5s ease;
}

.about-vm-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 35px 75px rgba(45, 27, 78, 0.15);
}

.about-vm-card:hover::before {
    transform: scale(1.45);
}

.about-vm-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(66, 39, 120, 0.075);
}

.about-vm-icon img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.about-vm-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: var(--about-dark);
    font-family: "Manrope", sans-serif;
    font-size: 23px;
    font-weight: 800;
}

.about-vm-card p {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0;
    color: var(--about-text);
    font-size: 13px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   CLIENTELE
   --------------------------------------------------------- */

.about-clientele {
    position: relative;
    margin-top: 16px;
    padding: 42px 35px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 27px;
    background: var(--about-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--about-shadow);
    text-align: center;
}

.about-clientele::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(66, 39, 120, 0.06);
}

.about-clientele h2 {
    position: relative;
    z-index: 1;
    margin: 13px 0;
    color: var(--about-dark);
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.about-clientele h2 span {
    color: var(--about-purple);
}

.about-clientele > p {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    color: var(--about-text);
    font-size: 13px;
    line-height: 1.8;
}

.about-client-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.about-client-tags span {
    padding: 9px 14px;
    border: 1px solid rgba(66, 39, 120, 0.09);
    border-radius: 999px;
    background: rgba(66, 39, 120, 0.045);
    color: #665e77;
    font-size: 10px;
    font-weight: 700;
    transition: 0.25s ease;
}

.about-client-tags span:hover {
    transform: translateY(-2px);
    background: rgba(66, 39, 120, 0.09);
    color: var(--about-purple);
}


/* ---------------------------------------------------------
   SCROLL REVEAL ANIMATION
   --------------------------------------------------------- */

.about-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.about-delay-1 {
    transition-delay: 0.10s;
}

.about-delay-2 {
    transition-delay: 0.20s;
}

.about-delay-3 {
    transition-delay: 0.30s;
}


/* ---------------------------------------------------------
   RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .about-story-grid {
        grid-template-columns: 280px 1fr;
        gap: 40px;
    }

    .about-founder-image {
        height: 350px;
    }

    .about-vm-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* ---------------------------------------------------------
   RESPONSIVE — MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .about-hero {
        min-height: 390px;
        padding: 135px 0 60px;
    }

    .about-hero h1 {
        font-size: 48px;
    }

    .about-hero-description {
        font-size: 14px;
    }

    .about-story {
        padding: 40px 0 50px;
    }

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-founder {
        width: min(100%, 340px);
        margin: auto;
    }

    .about-founder-image {
        height: 340px;
    }

    .about-story-content h2 {
        font-size: 38px;
    }

    .about-lead {
        font-size: 18px;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .about-direction {
        padding: 45px 0;
    }

    .about-vm-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .about-vm-card {
        min-height: auto;
        padding: 27px;
    }

    .about-clientele {
        padding: 30px 20px;
    }

    .about-clientele h2 {
        font-size: 27px;
    }

}


/* ---------------------------------------------------------
   VERY SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .about-hero h1 {
        font-size: 42px;
    }

    .about-section-heading h2 {
        font-size: 34px;
    }

    .about-founder-image {
        height: 310px;
    }

    .about-vm-card h3 {
        font-size: 21px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .about-reveal {
        opacity: 1;
        transform: none;
    }

}

/* ============================================================
   AKSHAYA LABTECH — AGILENT / CHROMATOGRAPHY PREMIUM CSS
   Paste this entire block at the END of assets/css/style.css
   ============================================================ */

.agilent-page {
    --ag-purple: #4b2a86;
    --ag-purple-dark: #25143f;
    --ag-purple-soft: #7654b4;
    --ag-ink: #171326;
    --ag-muted: #706b80;
    --ag-bg: #f7f5fb;
    --ag-white: rgba(255,255,255,.78);
    --ag-border: rgba(75,42,134,.12);
    --ag-shadow: 0 24px 70px rgba(42, 25, 75, .10);
    --ag-radius: 28px;
    background:
        radial-gradient(circle at 8% 8%, rgba(120, 82, 190, .10), transparent 28%),
        radial-gradient(circle at 92% 28%, rgba(113, 85, 190, .08), transparent 26%),
        #f8f7fb;
    color: var(--ag-ink);
    overflow-x: hidden;
}

.agilent-page *,
.agilent-page *::before,
.agilent-page *::after {
    box-sizing: border-box;
}

.agilent-page a {
    text-decoration: none;
}

.agilent-page img {
    max-width: 100%;
}

.agilent-page .container {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
}


/* ============================================================
   HERO
   ============================================================ */

.ag-hero {
    position: relative;
    min-height: 720px;
    padding: 150px 0 95px;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 30%, rgba(103, 67, 164, .10), transparent 31%),
        radial-gradient(circle at 78% 52%, rgba(112, 81, 178, .12), transparent 32%),
        linear-gradient(135deg, #fbfaff 0%, #f4f1fa 100%);
}

.ag-hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    right: -230px;
    top: -230px;
    background: rgba(100, 67, 159, .06);
    filter: blur(2px);
    z-index: -2;
}

.ag-hero::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    left: -260px;
    bottom: -300px;
    background: rgba(102, 70, 164, .055);
    z-index: -2;
}

.ag-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .45;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(75,42,134,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,42,134,.035) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.ag-hero-watermark {
    position: absolute;
    width: min(650px, 55vw);
    right: -80px;
    bottom: -110px;
    z-index: -1;
    pointer-events: none;
    opacity: .035;
    filter: grayscale(1);
}

.ag-hero-watermark img {
    width: 100%;
    display: block;
}

.ag-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(480px, .97fr);
    gap: 50px;
    align-items: center;
}

.ag-hero-content {
    max-width: 760px;
}

.ag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
    color: var(--ag-purple);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ag-eyebrow span {
    width: 28px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--ag-purple), #9a7ccc);
}

.ag-hero h1 {
    margin: 0;
    max-width: 850px;
    color: var(--ag-ink);
    font-size: clamp(58px, 6vw, 92px);
    line-height: .96;
    letter-spacing: -.065em;
    font-weight: 750;
}

.ag-hero h1 strong {
    display: block;
    font-weight: 750;
    background: linear-gradient(100deg, #3e216e 0%, #68439d 48%, #8b68bd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ag-hero-content > p {
    max-width: 650px;
    margin: 30px 0 0;
    color: var(--ag-muted);
    font-size: 18px;
    line-height: 1.75;
}

.ag-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin-top: 35px;
}

.ag-primary-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    padding: 0 25px;
    border: 1px solid rgba(75,42,134,.08);
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, #422577, #67429b);
    box-shadow: 0 14px 32px rgba(72, 40, 125, .22);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.ag-primary-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255,255,255,.23) 50%,
        transparent 75%
    );
    transition: transform .65s ease;
}

.ag-primary-btn:hover {
    transform: translateY(-3px);
    color: #fff !important;
    box-shadow: 0 20px 40px rgba(72, 40, 125, .28);
}

.ag-primary-btn:hover::before {
    transform: translateX(110%);
}

.ag-primary-btn i {
    font-size: 17px;
    transition: transform .3s ease;
}

.ag-primary-btn:hover i {
    transform: translate(3px, -3px);
}

.ag-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ag-purple);
    font-size: 14px;
    font-weight: 700;
    transition: gap .3s ease, color .3s ease;
}

.ag-secondary-link:hover {
    color: #2d174f;
    gap: 14px;
}


/* ============================================================
   HERO VISUAL
   ============================================================ */

.ag-hero-visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-core {
    position: relative;
    width: 230px;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 32%, rgba(255,255,255,.96), rgba(246,242,252,.78) 52%, rgba(228,220,242,.62));
    box-shadow:
        inset 0 0 35px rgba(255,255,255,.9),
        0 35px 75px rgba(58, 31, 101, .15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 4;
}

.ag-core-glow {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(100,67,160,.13);
    filter: blur(25px);
    animation: agPulse 4s ease-in-out infinite;
}

.ag-core i {
    position: relative;
    color: var(--ag-purple);
    font-size: 49px;
    margin-bottom: 8px;
}

.ag-core span {
    position: relative;
    color: var(--ag-purple-dark);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .14em;
}

.ag-core small {
    position: relative;
    margin-top: 4px;
    color: #898194;
    font-size: 11px;
    letter-spacing: .08em;
}

.ag-orbit {
    position: absolute;
    border: 1px solid rgba(78,45,132,.14);
    border-radius: 50%;
    pointer-events: none;
}

.ag-orbit-1 {
    width: 330px;
    height: 330px;
    animation: agSpin 18s linear infinite;
}

.ag-orbit-2 {
    width: 450px;
    height: 450px;
    border-style: dashed;
    opacity: .65;
    animation: agSpinReverse 28s linear infinite;
}

.ag-orbit-3 {
    width: 560px;
    height: 560px;
    opacity: .35;
    animation: agSpin 35s linear infinite;
}

.ag-orbit::before,
.ag-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #67429b;
    box-shadow: 0 0 0 7px rgba(103,66,155,.08);
}

.ag-orbit::before {
    top: 10%;
    left: 9%;
}

.ag-orbit::after {
    right: 11%;
    bottom: 13%;
    width: 6px;
    height: 6px;
}

.ag-floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 185px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 17px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 18px 45px rgba(44, 27, 73, .11);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ag-floating-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--ag-purple);
    background: rgba(75,42,134,.08);
}

.ag-floating-icon i {
    font-size: 19px;
}

.ag-floating-card strong,
.ag-floating-card small {
    display: block;
}

.ag-floating-card strong {
    color: var(--ag-ink);
    font-size: 13px;
    font-weight: 800;
}

.ag-floating-card small {
    margin-top: 3px;
    color: #888092;
    font-size: 10px;
}

.ag-float-1 {
    top: 9%;
    right: 2%;
    animation: agFloat 5.5s ease-in-out infinite;
}

.ag-float-2 {
    left: 0;
    bottom: 15%;
    animation: agFloat 6.5s ease-in-out infinite .7s;
}

.ag-float-3 {
    right: 3%;
    bottom: 4%;
    animation: agFloat 6s ease-in-out infinite 1.2s;
}

.ag-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 27px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: #958da3 !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ag-scroll-indicator i {
    font-size: 16px;
    animation: agBounce 1.8s ease-in-out infinite;
}


/* ============================================================
   INTRO
   ============================================================ */

.ag-intro {
    position: relative;
    padding: 82px 0 70px;
    background: #fff;
}

.ag-intro-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: end;
}

.ag-intro h2,
.ag-section-heading h2 {
    margin: 0;
    color: var(--ag-ink);
    font-size: clamp(40px, 4.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 750;
}

.ag-intro h2 em,
.ag-section-heading h2 em,
.ag-cta h2 em {
    color: var(--ag-purple);
    font-style: normal;
}

.ag-intro-copy {
    max-width: 570px;
    padding-bottom: 4px;
}

.ag-intro-copy p {
    margin: 0 0 14px;
    color: var(--ag-muted);
    font-size: 16px;
    line-height: 1.8;
}

.ag-intro-copy p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.ag-products {
    position: relative;
    padding: 50px 0 95px;
    background:
        radial-gradient(circle at 95% 25%, rgba(92,57,147,.07), transparent 27%),
        #f7f6fa;
}

.ag-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 34px;
}

.ag-section-heading > p {
    max-width: 470px;
    margin: 0 0 5px;
    color: var(--ag-muted);
    font-size: 15px;
    line-height: 1.75;
}

.ag-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.ag-product-card {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: var(--ag-radius);
    color: inherit;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.91),
            rgba(247,244,251,.72)
        );
    box-shadow: 0 16px 45px rgba(49, 28, 82, .075);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform .45s cubic-bezier(.2,.75,.25,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.ag-product-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    top: -95px;
    right: -95px;
    border-radius: 50%;
    background: rgba(111,76,174,.08);
    transition: transform .5s ease, background .5s ease;
}

.ag-product-card:hover {
    transform: translateY(-9px);
    color: inherit;
    border-color: rgba(111,76,174,.18);
    box-shadow: 0 30px 65px rgba(49, 28, 82, .13);
}

.ag-product-card:hover::before {
    transform: scale(1.3);
    background: rgba(111,76,174,.12);
}

.ag-card-number {
    position: absolute;
    top: 19px;
    left: 21px;
    z-index: 4;
    color: #aaa3b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ag-product-image {
    position: relative;
    height: 205px;
    margin: 18px 18px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 21px;
    background:
        radial-gradient(circle, rgba(103,66,157,.08), transparent 66%),
        rgba(246,243,250,.72);
}

.ag-product-image img {
    position: relative;
    z-index: 2;
    width: 78%;
    height: 78%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .55s cubic-bezier(.2,.75,.25,1);
}

.ag-product-card:hover .ag-product-image img {
    transform: scale(1.09) translateY(-4px);
}

.ag-image-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(103,66,157,.08);
    filter: blur(22px);
}

.ag-product-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 19px 23px 23px;
}

.ag-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(75,42,134,.08);
    border-radius: 13px;
    color: var(--ag-purple);
    background: rgba(75,42,134,.065);
    transition: transform .35s ease, background .35s ease;
}

.ag-product-card:hover .ag-card-icon {
    transform: rotate(-5deg) scale(1.05);
    background: rgba(75,42,134,.11);
}

.ag-card-icon i {
    font-size: 18px;
}

.ag-product-body h3 {
    margin: 0;
    color: var(--ag-ink);
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: -.025em;
    font-weight: 750;
}

.ag-product-body p {
    margin: 12px 0 20px;
    color: #7c7587;
    font-size: 13px;
    line-height: 1.7;
}

.ag-explore {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ag-purple);
    font-size: 13px;
    font-weight: 800;
}

.ag-explore i {
    transition: transform .3s ease;
}

.ag-product-card:hover .ag-explore i {
    transform: translate(3px, -3px);
}


/* ============================================================
   CONTACT CARD
   ============================================================ */

.ag-contact-card {
    justify-content: center;
    padding: 25px;
    background:
        radial-gradient(circle at 90% 10%, rgba(153,119,204,.35), transparent 30%),
        linear-gradient(145deg, #2b1945, #4b2a76 58%, #68469a);
    color: #fff;
}

.ag-contact-card::before {
    background: rgba(255,255,255,.08);
}

.ag-contact-watermark {
    position: absolute;
    right: -20px;
    bottom: -30px;
    width: 230px;
    opacity: .075;
    filter: grayscale(1) brightness(0) invert(1);
}

.ag-contact-watermark img {
    width: 100%;
}

.ag-contact-content {
    position: relative;
    z-index: 3;
}

.ag-contact-content .ag-card-icon {
    color: #fff;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.11);
}

.ag-contact-content small {
    display: block;
    margin-bottom: 9px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ag-contact-content h3 {
    margin: 0;
    color: #fff;
    font-size: 29px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.ag-contact-content p {
    margin: 17px 0 24px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.75;
}

.ag-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
}

.ag-contact-link i {
    transition: transform .3s ease;
}

.ag-contact-link:hover i {
    transform: translate(3px, -3px);
}


/* ============================================================
   CTA
   ============================================================ */

.ag-cta-section {
    padding: 35px 0 90px;
    background: #f7f6fa;
}

.ag-cta {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    gap: 70px;
    padding: 52px 70px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 34px;
    background:
        radial-gradient(circle at 85% 30%, rgba(115,77,175,.15), transparent 28%),
        rgba(255,255,255,.64);
    box-shadow: 0 25px 70px rgba(45, 25, 77, .09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.ag-cta::before {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    left: -170px;
    top: -160px;
    border-radius: 50%;
    background: rgba(105,69,164,.055);
}

.ag-cta-logo {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    flex: 0 0 190px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(75,42,134,.10);
    background: rgba(255,255,255,.65);
    box-shadow: inset 0 0 35px rgba(255,255,255,.8);
}

.ag-cta-logo img {
    width: 70%;
    max-height: 70%;
    object-fit: contain;
    opacity: .78;
}

.ag-cta-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.ag-cta-content .ag-eyebrow {
    margin-bottom: 13px;
}

.ag-cta h2 {
    margin: 0;
    color: var(--ag-ink);
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 750;
}

.ag-cta p {
    max-width: 600px;
    margin: 17px 0 24px;
    color: var(--ag-muted);
    font-size: 15px;
    line-height: 1.75;
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.ag-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s cubic-bezier(.2,.7,.25,1),
        transform .8s cubic-bezier(.2,.7,.25,1);
}

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

.ag-delay-1 {
    transition-delay: .10s;
}

.ag-delay-2 {
    transition-delay: .18s;
}

.ag-delay-3 {
    transition-delay: .26s;
}


/* ============================================================
   BACK TO TOP
   ============================================================ */

.ag-back-top {
    position: fixed;
    right: 27px;
    bottom: 27px;
    z-index: 9999;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #422577, #68459b);
    box-shadow: 0 15px 35px rgba(54, 31, 91, .22);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.ag-back-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ag-back-top:hover {
    transform: translateY(-4px);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes agFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-13px);
    }
}

@keyframes agPulse {
    0%, 100% {
        transform: scale(.9);
        opacity: .55;
    }
    50% {
        transform: scale(1.12);
        opacity: .95;
    }
}

@keyframes agSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes agSpinReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes agBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1200px) {

    .ag-hero {
        padding-top: 135px;
    }

    .ag-hero-layout {
        grid-template-columns: 1fr 430px;
        gap: 20px;
    }

    .ag-hero-visual {
        min-height: 460px;
        transform: scale(.88);
    }

    .ag-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-product-card {
        min-height: 480px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 800px) {

    .agilent-page .container {
        width: min(100% - 30px, 680px);
    }

    .ag-hero {
        min-height: auto;
        padding: 125px 0 80px;
    }

    .ag-hero-layout {
        display: block;
    }

    .ag-hero h1 {
        font-size: clamp(49px, 14vw, 72px);
    }

    .ag-hero-content > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .ag-hero-actions {
        gap: 18px;
        margin-top: 28px;
    }

    .ag-hero-visual {
        min-height: 410px;
        margin-top: 30px;
        transform: scale(.82);
    }

    .ag-orbit-3 {
        display: none;
    }

    .ag-float-1 {
        right: -10px;
    }

    .ag-float-2 {
        left: -10px;
    }

    .ag-float-3 {
        right: -10px;
        bottom: 0;
    }

    .ag-scroll-indicator {
        display: none;
    }

    .ag-intro {
        padding: 65px 0 55px;
    }

    .ag-intro-layout {
        display: block;
    }

    .ag-intro-copy {
        margin-top: 25px;
    }

    .ag-products {
        padding: 45px 0 65px;
    }

    .ag-section-heading {
        display: block;
        margin-bottom: 27px;
    }

    .ag-section-heading > p {
        margin-top: 18px;
    }

    .ag-product-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ag-product-card {
        min-height: 0;
    }

    .ag-product-image {
        height: 220px;
    }

    .ag-cta-section {
        padding: 20px 0 65px;
    }

    .ag-cta {
        min-height: auto;
        display: block;
        padding: 38px 28px;
    }

    .ag-cta-logo {
        width: 125px;
        height: 125px;
        margin-bottom: 28px;
    }

    .ag-cta h2 {
        font-size: 39px;
    }

    .ag-back-top {
        right: 16px;
        bottom: 16px;
        width: 47px;
        height: 47px;
        border-radius: 14px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .ag-hero {
        padding-top: 110px;
    }

    .ag-hero h1 {
        font-size: 48px;
    }

    .ag-primary-btn {
        width: 100%;
    }

    .ag-secondary-link {
        margin-left: 4px;
    }

    .ag-hero-visual {
        min-height: 350px;
        transform: scale(.69);
        transform-origin: center top;
        margin-bottom: -45px;
    }

    .ag-floating-card {
        min-width: 165px;
        padding: 10px 12px;
    }

    .ag-floating-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }

    .ag-core {
        width: 205px;
        height: 205px;
    }

    .ag-orbit-1 {
        width: 300px;
        height: 300px;
    }

    .ag-orbit-2 {
        width: 390px;
        height: 390px;
    }

    .ag-card-number {
        top: 16px;
        left: 17px;
    }

    .ag-product-image {
        height: 190px;
        margin: 15px 15px 0;
    }

    .ag-product-body {
        padding: 17px 19px 21px;
    }

    .ag-contact-content h3 {
        font-size: 27px;
    }

}


/* ============================================================
   ACCESSIBILITY / REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .agilent-page *,
    .agilent-page *::before,
    .agilent-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .ag-reveal {
        opacity: 1;
        transform: none;
    }

}


/* ============================================================
   OPTIONAL HEADER COMPATIBILITY
   If your nav uses .site-header, this gives it a subtle
   glass effect after scrolling. It won't break older navs.
   ============================================================ */

.agilent-page .site-header.scrolled {
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 10px 35px rgba(41, 24, 69, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   AKSHAYA LABTECH — EXMIRE / MICRO SYRINGES
   Append this section to the END of assets/css/style.css
   ========================================================= */

.exmire-page {
    --ex-purple: #522b87;
    --ex-purple-dark: #24153f;
    --ex-purple-light: #7b52b5;
    --ex-ink: #171426;
    --ex-muted: #77738b;
    --ex-border: rgba(82, 43, 135, 0.12);
    --ex-glass: rgba(255, 255, 255, 0.66);
    --ex-shadow: 0 24px 70px rgba(42, 25, 73, 0.11);

    background:
        radial-gradient(circle at 12% 8%, rgba(120, 76, 190, .10), transparent 28%),
        radial-gradient(circle at 88% 30%, rgba(91, 57, 150, .08), transparent 30%),
        linear-gradient(180deg, #fbfaff 0%, #f5f3fa 48%, #ffffff 100%);
    color: var(--ex-ink);
    overflow-x: hidden;
}

.exmire-page #main {
    position: relative;
}

.exmire-page a {
    text-decoration: none;
}

.ex-hero,
.ex-intro,
.ex-products,
.ex-cta-section {
    position: relative;
}

.ex-hero {
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 125px 0 70px;
    overflow: hidden;
}

.ex-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    top: -260px;
    right: -160px;
    background: radial-gradient(circle, rgba(91, 51, 145, .13), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.ex-hero::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    left: -300px;
    bottom: -280px;
    background: radial-gradient(circle, rgba(127, 83, 186, .09), transparent 68%);
    pointer-events: none;
}

.ex-hero-watermark {
    position: absolute;
    width: min(720px, 70vw);
    height: 720px;
    right: -100px;
    top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .035;
    pointer-events: none;
}

.ex-hero-watermark img {
    width: 100%;
    max-width: 620px;
    height: auto;
    object-fit: contain;
}

.ex-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(82,43,135,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82,43,135,.045) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 75%, transparent 100%);
}

.ex-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    gap: 55px;
    align-items: center;
}

.ex-hero-content {
    max-width: 690px;
}

.ex-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
    color: var(--ex-purple);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ex-eyebrow span {
    width: 28px;
    height: 2px;
    display: inline-block;
    background: linear-gradient(90deg, var(--ex-purple), #b58bdf);
    border-radius: 5px;
}

.ex-hero h1 {
    margin: 0;
    color: #171126;
    font-size: clamp(55px, 7vw, 98px);
    line-height: .91;
    letter-spacing: -.055em;
    font-weight: 600;
}

.ex-hero h1 strong {
    display: block;
    color: var(--ex-purple);
    font-weight: 700;
}

.ex-hero-content > p {
    max-width: 590px;
    margin: 28px 0 0;
    color: #6d687f;
    font-size: 18px;
    line-height: 1.75;
}

.ex-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin-top: 34px;
}

.ex-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 23px;
    border-radius: 100px;
    background: linear-gradient(135deg, #542c8c, #7043a7);
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(82, 43, 135, .25);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    transition: transform .3s ease, box-shadow .3s ease;
}

.ex-primary-btn i {
    font-size: 17px;
}

.ex-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(82, 43, 135, .32);
}

.ex-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ex-ink);
    font-size: 13px;
    font-weight: 700;
    transition: color .25s ease, transform .25s ease;
}

.ex-secondary-link:hover {
    color: var(--ex-purple);
    transform: translateX(4px);
}

.ex-secondary-link i {
    color: var(--ex-purple);
}

.ex-hero-visual {
    min-height: 520px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ex-syringe-stage {
    width: min(520px, 100%);
    height: 500px;
    position: relative;
}

.ex-ring {
    position: absolute;
    border: 1px solid rgba(82, 43, 135, .14);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ex-ring-1 {
    width: 440px;
    height: 440px;
    animation: exRotate 20s linear infinite;
}

.ex-ring-2 {
    width: 330px;
    height: 330px;
    border-style: dashed;
    animation: exRotateReverse 16s linear infinite;
}

.ex-ring-3 {
    width: 235px;
    height: 235px;
    border-color: rgba(112, 67, 167, .22);
    animation: exPulse 4s ease-in-out infinite;
}

.ex-ring::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 18px;
    left: 50%;
    border-radius: 50%;
    background: #6f43a7;
    box-shadow: 0 0 18px rgba(111, 67, 167, .6);
}

.ex-syringe-card {
    position: absolute;
    width: 300px;
    min-height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 27px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,.82),
        rgba(248,244,253,.58)
    );
    box-shadow:
        0 30px 70px rgba(42, 25, 73, .15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 3;
}

.ex-syringe-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    left: -30px;
    top: -30px;
    border-radius: 50%;
    background: rgba(125, 82, 183, .12);
    filter: blur(22px);
    pointer-events: none;
}

.ex-syringe-icon,
.ex-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(82, 43, 135, .08);
    color: var(--ex-purple);
}

.ex-syringe-icon i {
    font-size: 25px;
}

.ex-syringe-card span {
    display: block;
    margin-bottom: 3px;
    color: #8a8297;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.ex-syringe-card strong {
    display: block;
    color: #211936;
    font-size: 18px;
    letter-spacing: .05em;
}

.ex-syringe-card small {
    display: block;
    margin-top: 6px;
    color: #8b8595;
    font-size: 10px;
}

.ex-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 185px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;
    background: rgba(255,255,255,.66);
    box-shadow: 0 18px 42px rgba(45, 28, 74, .10);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: exFloat 5s ease-in-out infinite;
}

.ex-floating-card i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(82,43,135,.08);
    color: var(--ex-purple);
}

.ex-floating-card strong,
.ex-floating-card small {
    display: block;
}

.ex-floating-card strong {
    color: #282035;
    font-size: 12px;
}

.ex-floating-card small {
    margin-top: 2px;
    color: #8a8493;
    font-size: 9px;
}

.ex-float-1 {
    top: 35px;
    left: 0;
}

.ex-float-2 {
    top: 210px;
    right: -20px;
    animation-delay: -1.8s;
}

.ex-float-3 {
    bottom: 45px;
    left: 30px;
    animation-delay: -3.2s;
}

.ex-scroll-indicator {
    position: absolute;
    z-index: 3;
    bottom: 27px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888294;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.ex-scroll-indicator i {
    color: var(--ex-purple);
    animation: exBounce 1.7s ease-in-out infinite;
}


/* INTRO */
.ex-intro {
    padding: 55px 0 65px;
}

.ex-intro-layout {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 80px;
    align-items: end;
    padding: 42px 0;
    border-top: 1px solid var(--ex-border);
    border-bottom: 1px solid var(--ex-border);
}

.ex-intro h2,
.ex-section-heading h2 {
    margin: 0;
    max-width: 650px;
    color: #1d1730;
    font-size: clamp(40px, 5vw, 65px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 600;
}

.ex-intro h2 em,
.ex-section-heading h2 em,
.ex-cta h2 em {
    color: var(--ex-purple);
    font-style: normal;
}

.ex-intro-copy {
    max-width: 560px;
}

.ex-intro-copy p {
    margin: 0 0 14px;
    color: #777187;
    font-size: 15px;
    line-height: 1.8;
}

.ex-intro-copy p:last-child {
    margin-bottom: 0;
}


/* PRODUCTS */
.ex-products {
    padding: 45px 0 70px;
}

.ex-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 32px;
}

.ex-section-heading > p {
    max-width: 390px;
    margin: 0 0 5px;
    color: #807a8d;
    font-size: 14px;
    line-height: 1.7;
}

.ex-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ex-product-card {
    position: relative;
    min-height: 490px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(248,246,252,.65));
    box-shadow: var(--ex-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.ex-product-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -80px;
    border-radius: 50%;
    background: rgba(91, 52, 148, .07);
    transition: transform .5s ease;
}

.ex-product-card:hover {
    transform: translateY(-9px);
    border-color: rgba(82,43,135,.16);
    box-shadow: 0 35px 85px rgba(42,25,73,.16);
}

.ex-product-card:hover::before {
    transform: scale(1.35);
}

.ex-card-number {
    position: absolute;
    z-index: 4;
    top: 20px;
    left: 23px;
    color: #aaa4b5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.ex-product-image {
    position: relative;
    height: 255px;
    margin: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at center, rgba(111,67,167,.08), transparent 60%),
        #fff;
}

.ex-product-image img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    transition: transform .65s cubic-bezier(.2,.8,.2,1);
}

.ex-product-card:hover .ex-product-image img {
    transform: scale(1.08);
}

.ex-image-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(255,255,255,.7) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    transition: transform .8s ease;
}

.ex-product-card:hover .ex-image-glow {
    transform: translateX(120%);
}

.ex-product-body {
    position: relative;
    z-index: 2;
    padding: 19px 25px 25px;
}

.ex-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    margin-bottom: 17px;
}

.ex-card-icon i {
    font-size: 19px;
}

.ex-product-body h3 {
    margin: 0;
    color: #211b34;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.ex-product-body p {
    max-width: 490px;
    margin: 12px 0 17px;
    color: #7c7689;
    font-size: 13px;
    line-height: 1.7;
}

.ex-explore,
.ex-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ex-purple);
    font-size: 12px;
    font-weight: 800;
}

.ex-explore i,
.ex-contact-link i {
    transition: transform .25s ease;
}

.ex-product-card:hover .ex-explore i,
.ex-contact-link:hover i {
    transform: translate(3px, -3px);
}


/* CONTACT CARD */
.ex-contact-card {
    justify-content: center;
    padding: 35px;
    min-height: 490px;
    background:
        radial-gradient(circle at 80% 20%, rgba(177,135,224,.25), transparent 34%),
        linear-gradient(135deg, #24153e 0%, #4d287d 100%);
    color: white;
}

.ex-contact-card::before {
    background: rgba(255,255,255,.07);
}

.ex-contact-watermark {
    position: absolute;
    width: 380px;
    height: 380px;
    right: -100px;
    bottom: -100px;
    opacity: .055;
    pointer-events: none;
}

.ex-contact-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ex-contact-card .ex-card-number {
    color: rgba(255,255,255,.38);
}

.ex-contact-content {
    position: relative;
    z-index: 2;
    max-width: 440px;
}

.ex-contact-content .ex-card-icon {
    background: rgba(255,255,255,.10);
    color: #fff;
}

.ex-contact-content small {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ex-contact-content h3 {
    margin: 0;
    max-width: 350px;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.04em;
}

.ex-contact-content p {
    max-width: 410px;
    margin: 18px 0 23px;
    color: rgba(255,255,255,.67);
    font-size: 13px;
    line-height: 1.75;
}

.ex-contact-link {
    color: #fff;
}

.ex-contact-link i {
    color: #d4b8f1;
}


/* CTA */
.ex-cta-section {
    padding: 15px 0 80px;
}

.ex-cta {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 45px 55px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 15%, rgba(116,76,172,.13), transparent 35%),
        rgba(255,255,255,.62);
    box-shadow: var(--ex-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ex-cta::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    left: -150px;
    bottom: -190px;
    background: rgba(82,43,135,.05);
}

.ex-cta-logo {
    position: relative;
    z-index: 2;
    flex: 0 0 145px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(82,43,135,.045);
}

.ex-cta-logo img {
    width: 105px;
    height: 105px;
    object-fit: contain;
    opacity: .72;
}

.ex-cta-content {
    position: relative;
    z-index: 2;
}

.ex-cta h2 {
    margin: 0;
    color: #211934;
    font-size: clamp(35px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.045em;
}

.ex-cta p {
    max-width: 680px;
    margin: 14px 0 21px;
    color: #7b7489;
    font-size: 14px;
    line-height: 1.7;
}


/* REVEAL ANIMATION */
.ex-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

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

.ex-delay-1 {
    transition-delay: .12s;
}

.ex-delay-2 {
    transition-delay: .22s;
}

.ex-delay-3 {
    transition-delay: .32s;
}


/* BACK TO TOP */
.ex-back-top {
    position: fixed;
    z-index: 999;
    right: 28px;
    bottom: 28px;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #4e287e, #7144a7);
    box-shadow: 0 14px 35px rgba(61,31,100,.25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.ex-back-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ex-back-top:hover {
    transform: translateY(-4px);
}


/* KEYFRAMES */
@keyframes exRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes exRotateReverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes exPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(.96); opacity: .7; }
    50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}

@keyframes exFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes exBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}


/* RESPONSIVE */
@media (max-width: 991px) {
    .ex-hero {
        min-height: auto;
        padding-top: 120px;
    }

    .ex-hero-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ex-hero-content {
        max-width: 800px;
        text-align: center;
        margin: 0 auto;
    }

    .ex-eyebrow {
        justify-content: center;
    }

    .ex-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .ex-hero-actions {
        justify-content: center;
    }

    .ex-hero-visual {
        min-height: 500px;
    }

    .ex-intro-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ex-section-heading {
        display: block;
    }

    .ex-section-heading > p {
        margin-top: 16px;
    }
}

@media (max-width: 767px) {
    .ex-hero {
        padding: 105px 0 50px;
    }

    .ex-hero h1 {
        font-size: clamp(52px, 15vw, 75px);
    }

    .ex-hero-content > p {
        font-size: 15px;
    }

    .ex-hero-visual {
        min-height: 410px;
    }

    .ex-syringe-stage {
        height: 400px;
    }

    .ex-ring-1 {
        width: 330px;
        height: 330px;
    }

    .ex-ring-2 {
        width: 255px;
        height: 255px;
    }

    .ex-ring-3 {
        width: 180px;
        height: 180px;
    }

    .ex-syringe-card {
        width: 255px;
        min-height: 125px;
        padding: 19px;
    }

    .ex-syringe-card strong {
        font-size: 15px;
    }

    .ex-floating-card {
        min-width: 150px;
        padding: 10px;
    }

    .ex-floating-card i {
        width: 31px;
        height: 31px;
    }

    .ex-floating-card small {
        display: none;
    }

    .ex-float-1 {
        left: 0;
        top: 25px;
    }

    .ex-float-2 {
        right: -5px;
        top: 165px;
    }

    .ex-float-3 {
        left: 5px;
        bottom: 25px;
    }

    .ex-scroll-indicator {
        display: none;
    }

    .ex-intro {
        padding: 30px 0 45px;
    }

    .ex-intro-layout {
        padding: 30px 0;
    }

    .ex-products {
        padding: 30px 0 50px;
    }

    .ex-product-grid {
        grid-template-columns: 1fr;
    }

    .ex-product-card,
    .ex-contact-card {
        min-height: 0;
    }

    .ex-product-image {
        height: 230px;
    }

    .ex-cta-section {
        padding-bottom: 50px;
    }

    .ex-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 35px 25px;
    }

    .ex-cta-logo {
        flex-basis: 100px;
        width: 100px;
        height: 100px;
    }

    .ex-cta-logo img {
        width: 72px;
        height: 72px;
    }

    .ex-back-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ex-ring,
    .ex-floating-card,
    .ex-scroll-indicator i {
        animation: none !important;
    }

    .ex-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ex-product-card,
    .ex-primary-btn,
    .ex-secondary-link,
    .ex-product-image img {
        transition: none;
    }
}