:root{
  --primary:#5E57FD;
  --primary-dark:#4941e8;
  --primary-deep:#2d2a9f;
  --accent:#00a6c8;
  --dark:#0f172a;
  --text:#475569;
  --muted:#64748b;
  --light:#f8fbff;
  --soft-blue:#eef0ff;
  --border:#e2e8f0;
  --white:#ffffff;
  --success:#25d366;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#ffffff;
  font-size:16px;
  line-height:1.72;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-open{
  overflow:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

p,
a,
li,
span,
input,
textarea,
button,
select{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

p,
li{
  font-weight:500;
}

strong,
b,
h1,
h2,
h3,
h4{
  color:var(--dark);
}

.container{
  width:min(1180px,92%);
  margin:auto;
}

.site-header .container{
  width:min(1400px,95%);
}

/* Utilities */
.section{
  position:relative;
  overflow:hidden;
  padding:96px 0;
}

.section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(120deg, rgba(94,87,253,.014) 1px, transparent 1px),
    linear-gradient(30deg, rgba(0,166,200,.010) 1px, transparent 1px);
  background-size:110px 110px;
  opacity:.22;
  z-index:0;
}

.section > .container{
  position:relative;
  z-index:1;
}

.section-light{
  background:var(--light);
}

/* Premium Section Heading System */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0;
  margin-bottom:18px;
  background:transparent;
  border-radius:0;
  color:var(--primary);
  font-size:13px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  width:46px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  box-shadow:none;
}

.eyebrow::after{
  display:none;
}

.section-title{
  max-width:940px;
  margin:0 auto 58px;
  text-align:center;
}

.section-title .eyebrow{
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}

.section-title h2{
  color:#0f172a;
  font-size:clamp(38px,4vw,56px);
  line-height:1.08;
  letter-spacing:-1.8px;
  margin-bottom:20px;
  font-weight:800;
}

.section-title h2 span{
  color:var(--primary);
}

.section-title p{
  max-width:820px;
  margin:0 auto;
  color:#64748b;
  font-size:18px;
  line-height:1.82;
  font-weight:500;
}

.section-title.left{
  text-align:left;
  margin-left:0;
  margin-right:0;
}

.section-title.left .eyebrow{
  justify-content:flex-start;
  margin-left:0;
  margin-right:0;
}

.section-title.left p{
  margin-left:0;
  margin-right:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition:.25s ease;
  min-height:48px;
}

.btn i{
  font-size:14px;
  line-height:1;
}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),#4941e8);
  color:#ffffff;
  box-shadow:0 14px 32px rgba(94,87,253,.26);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(94,87,253,.34);
}

.btn-outline{
  background:#ffffff;
  color:var(--primary);
  border-color:rgba(94,87,253,.32);
}

.btn-outline:hover{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
  transform:translateY(-2px);
}

.btn-white{
  background:#ffffff;
  color:var(--primary);
}

.btn-white:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(255,255,255,.22);
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes pulseWhatsApp{
  0%,100%{
    box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 0 0 rgba(37,211,102,.28);
  }
  50%{
    box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 0 14px rgba(37,211,102,0);
  }
}

.animate-up{
  animation:fadeUp .75s ease both;
}

.delay-1{animation-delay:.08s;}
.delay-2{animation-delay:.18s;}
.delay-3{animation-delay:.28s;}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.navbar{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
}

.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}

.logo img{
  height:46px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  object-position:left center;
  display:block;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  color:var(--dark);
  font-size:15.2px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  margin-left:auto;
}

.nav-links a{
  position:relative;
  padding:33px 0;
  margin:0;
  letter-spacing:-.05px;
  color:#1e293b;
}

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

.nav-links a:hover,
.nav-links a.active{
  color:var(--primary);
}

.nav-links a:hover::after,
.nav-links a.active::after{
  width:100%;
}

.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

.menu-toggle span{
  position:relative;
  width:20px;
  height:2px;
  background:var(--dark);
  border-radius:10px;
  transition:.25s ease;
}

.menu-toggle span::before,
.menu-toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--dark);
  border-radius:10px;
  transition:.25s ease;
}

.menu-toggle span::before{
  top:-7px;
}

.menu-toggle span::after{
  top:7px;
}

.menu-open .menu-toggle span{
  background:transparent;
}

.menu-open .menu-toggle span::before{
  top:0;
  transform:rotate(45deg);
}

.menu-open .menu-toggle span::after{
  top:0;
  transform:rotate(-45deg);
}

/* Homepage Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:118px 0 104px;
  background:
    radial-gradient(circle at 90% 15%,rgba(0,166,200,.12),transparent 30%),
    linear-gradient(110deg,#f8fbff 0%,#f8fbff 52%,#f1f0ff 100%);
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(94,87,253,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 0% 100%, rgba(94,87,253,.05) 0%, transparent 50%);
}

#moleculeCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.65;
}

.hero::after{
  content:"";
  position:absolute;
  right:-150px;
  top:82px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(94,87,253,.12),rgba(0,166,200,.08));
  z-index:0;
}

.brand-bg-shape{
  position:absolute;
  width:420px;
  height:420px;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat;
  opacity:.035;
  pointer-events:none;
  z-index:0;
}

.hero-brand-shape{
  right:-130px;
  bottom:-155px;
  width:520px;
  height:520px;
  opacity:.026;
  transform:rotate(-12deg);
}

.hero-grid{
  position:relative;
  z-index:2;
  max-width:1040px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero h1{
  color:var(--dark);
  font-size:clamp(42px,5vw,66px);
  line-height:1.08;
  letter-spacing:-2px;
  margin-bottom:26px;
  max-width:1040px;
  font-weight:800;
}

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

.hero-audience{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:-10px auto 24px;
  padding:9px 17px;
  border-radius:999px;
  background:rgba(94,87,253,.09);
  border:1px solid rgba(94,87,253,.14);
  color:#334155;
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.15px;
}

.hero-audience span{
  color:var(--primary);
  display:inline-block;
  min-width:255px;
  text-align:left;
  transition:opacity .35s ease, transform .35s ease;
}

.hero-audience span.heading-out{
  opacity:0;
  transform:translateY(10px);
}

.hero-audience span.heading-in{
  opacity:1;
  transform:translateY(0);
}

.hero p{
  max-width:920px;
  color:var(--text);
  font-size:18.5px;
  line-height:1.75;
  margin:0 auto 36px;
  font-weight:500;
}

.hero-rotate-wrap{
  min-height:150px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
}

.hero-rotate-wrap p{
  margin-bottom:36px;
}

#heroRotate{
  display:block;
  min-height:34px;
  line-height:1.7;
  margin-top:6px;
  color:var(--text);
  font-weight:600;
}

/* Cursor feel */
#heroRotate::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:3px;
  background:var(--primary);
  vertical-align:-2px;
  animation:typeCursorBlink .8s steps(1) infinite;
}

@keyframes typeCursorBlink{
  0%,48%{
    opacity:1;
  }
  49%,100%{
    opacity:0;
  }
}

@media(max-width:760px){
  .hero-rotate-wrap{
    min-height:210px;
  }

  #heroRotate{
    min-height:58px;
    line-height:1.65;
  }
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.hero-actions .btn{
  min-height:54px;
  padding:15px 28px;
  border-radius:999px;
  font-size:15px;
  letter-spacing:-.1px;
}

/* Corporate Pharma Inner Page Hero */
.page-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:420px;
  display:flex;
  align-items:center;
  padding:96px 0 88px;
  background:
    linear-gradient(90deg,rgba(248,251,255,.98) 0%,rgba(248,251,255,.92) 42%,rgba(248,251,255,.42) 68%,rgba(248,251,255,.20) 100%),
    linear-gradient(135deg,rgba(94,87,253,.10),rgba(0,166,200,.08)),
    var(--page-hero-image, url("/assets/img/api-lab.webp")) center right/cover no-repeat;
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(94,87,253,.10), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(0,166,200,.08), transparent 28%);
  z-index:0;
}

.page-hero::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:54%;
  height:100%;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(94,87,253,.16) 2px, transparent 2.5px),
    linear-gradient(120deg, rgba(94,87,253,.035) 1px, transparent 1px);
  background-size:74px 74px, 120px 120px;
  opacity:.45;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 48%,transparent 100%);
  z-index:0;
}

.page-molecule-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.48;
}

.page-hero-grid{
  position:relative;
  z-index:3;
  display:block;
}

.page-hero-grid > div:first-child{
  max-width:760px;
  position:relative;
  z-index:3;
}

.page-hero-grid > div:first-child::after{
  content:"";
  display:block;
  width:104px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  margin-top:26px;
}

.page-hero .breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  color:#64748b;
  font-size:13.5px;
  font-weight:700;
  margin-bottom:22px;
}

.page-hero .breadcrumb a{
  color:var(--primary);
}

.page-hero .eyebrow{
  display:none;
}

.page-hero h1{
  color:#0f172a;
  font-size:clamp(42px,5vw,68px);
  line-height:1.05;
  letter-spacing:-2.2px;
  margin-top:4px;
  margin-bottom:22px;
  font-weight:800;
  max-width:760px;
}

.page-hero h1 span{
  color:var(--primary);
}

.page-hero p{
  color:#475569;
  font-size:18px;
  line-height:1.78;
  max-width:710px;
  margin-bottom:0;
  font-weight:500;
}

.page-hero .hero-actions{
  margin-top:28px;
}

.page-hero .hero-actions .btn{
  min-height:50px;
  padding:14px 24px;
  border-radius:999px;
}

.page-hero .about-visual,
.page-hero .capability-visual,
.page-hero .product-visual,
.page-hero .blog-visual,
.page-hero .faq-visual,
.page-hero .contact-visual{
  display:none;
}

/* Credentials */
.credentials{
  padding:34px 0;
  border-bottom:1px solid var(--border);
  background:#ffffff;
  position:relative;
  overflow:hidden;
}

.credentials-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.credential-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:15px;
  padding:20px 16px;
  text-align:center;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
  transition:.3s ease;
}

.credential-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 48px rgba(15,23,42,.10);
}

.credential-card strong{
  display:block;
  color:var(--dark);
  font-size:16.5px;
  margin-bottom:5px;
  font-weight:800;
}

.credential-card span{
  font-size:13.5px;
  color:#475569;
  font-weight:600;
}

/* About CLAYRAS - Homepage */
.home-company-section{
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.home-company-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:64px;
  align-items:center;
}

.home-company-visual{
  position:relative;
  min-height:560px;
}

.home-company-image{
  position:relative;
  overflow:hidden;
  min-height:520px;
  border-radius:36px;
  clip-path:polygon(0 0,100% 0,100% 88%,86% 100%,0 100%);
  background:
    linear-gradient(135deg,rgba(94,87,253,.32),rgba(0,166,200,.12)),
    url("/assets/img/api-lab.webp") center/cover no-repeat;
  box-shadow:0 34px 90px rgba(15,23,42,.16);
  border:1px solid rgba(94,87,253,.14);
}

.home-company-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(15,23,42,0) 42%,rgba(15,23,42,.48) 100%),
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.20),transparent 26%);
  z-index:1;
}

.home-company-image::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:230px;
  height:230px;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat;
  opacity:.13;
  filter:brightness(0) invert(1);
  z-index:2;
}

.home-company-badge{
  position:absolute;
  left:26px;
  right:auto;
  bottom:26px;
  z-index:3;
  max-width:86%;
  padding:20px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 48px rgba(15,23,42,.18);
}

.home-company-badge strong{
  display:block;
  color:#0f172a;
  font-size:20px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.4px;
  margin-bottom:6px;
}

.home-company-badge span{
  display:block;
  color:#475569;
  font-size:14px;
  line-height:1.6;
  font-weight:650;
}

.home-company-floating{
  position:absolute;
  z-index:4;
  right:-30px;
  top:42px;
  width:220px;
  padding:18px;
  border-radius:24px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.15);
  box-shadow:0 22px 62px rgba(15,23,42,.14);
}

.home-company-floating i{
  width:42px;
  height:42px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(94,87,253,.10);
  color:var(--primary);
  font-size:17px;
  margin-bottom:12px;
}

.home-company-floating strong{
  display:block;
  color:#0f172a;
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  margin-bottom:5px;
}

.home-company-floating span{
  color:#64748b;
  font-size:13.4px;
  line-height:1.55;
  font-weight:700;
}

.home-company-content{
  max-width:650px;
}

.home-company-content h2{
  color:#0f172a;
  font-size:clamp(38px,3.8vw,54px);
  line-height:1.08;
  letter-spacing:-1.8px;
  margin-bottom:22px;
  font-weight:800;
}

.home-company-content h2 span{
  color:var(--primary);
}

.home-company-content p{
  color:#64748b;
  font-size:17.2px;
  line-height:1.86;
  margin-bottom:17px;
  font-weight:500;
}

.home-company-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:30px 0 32px;
}

.home-company-point{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:17px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.13);
  box-shadow:0 14px 38px rgba(15,23,42,.045);
}

.home-company-point i{
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(94,87,253,.10);
  color:var(--primary);
  font-size:14px;
}

.home-company-point strong{
  display:block;
  color:#0f172a;
  font-size:14.7px;
  line-height:1.3;
  font-weight:800;
  margin-bottom:3px;
}

.home-company-point span{
  display:block;
  color:#64748b;
  font-size:13.2px;
  line-height:1.48;
  font-weight:600;
}

.home-company-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Content Layouts */
.about-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:64px;
  align-items:center;
}

.why-wrap{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:46px;
  align-items:center;
}

.content-block h2,
.intro-label h2{
  color:var(--dark);
  font-size:clamp(34px,3.4vw,48px);
  line-height:1.12;
  letter-spacing:-1.2px;
  margin-bottom:20px;
  font-weight:800;
}

.content-block p,
.intro-label p{
  margin-bottom:18px;
  color:var(--muted);
  font-size:16.8px;
  line-height:1.82;
  font-weight:500;
}

.content-points{
  display:grid;
  gap:10px;
  margin:22px 0 26px;
}

.content-points li{
  list-style:none;
  color:var(--dark);
  font-size:15.5px;
  line-height:1.55;
  font-weight:700;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.content-points li::before{
  content:"✓";
  width:22px;
  height:22px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--soft-blue);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  margin-top:2px;
}

.about-image,
.split-visual{
  min-height:520px;
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.30)),
    url("/assets/img/api-lab.webp") center/cover;
  box-shadow:0 34px 90px rgba(15,23,42,.16);
  position:relative;
  overflow:hidden;
}

.about-image::before{
  content:"";
  position:absolute;
  right:-75px;
  top:-80px;
  width:210px;
  height:210px;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat;
  opacity:.10;
  filter:brightness(0) invert(1);
  z-index:1;
}

.about-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(6,21,47,.18)),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.16), transparent 28%);
  pointer-events:none;
  z-index:2;
}

/* Universal Visual Cards */
.about-visual,
.capability-visual,
.product-visual,
.blog-visual,
.faq-visual,
.contact-visual{
  position:relative;
  min-height:430px;
  border-radius:30px;
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    url("/assets/img/api-lab.webp") center/cover;
  box-shadow:0 28px 80px rgba(15,23,42,.16);
  overflow:hidden;
}

.capability-visual{
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    url("/assets/img/api-export.webp") center/cover;
}

.product-visual{
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    url("/assets/img/api-products.webp") center/cover;
}

.blog-visual{
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    url("/assets/img/api-knowledge.webp") center/cover;
}

.faq-visual{
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    url("/assets/img/api-support.webp") center/cover;
}

.contact-visual{
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    url("/assets/img/api-documentation.webp") center/cover;
}

.about-visual-card,
.capability-visual-card,
.product-visual-card,
.blog-visual-card,
.faq-visual-card,
.contact-visual-card{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  padding:22px;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 20px 50px rgba(15,23,42,.16);
}

.about-visual-card strong,
.capability-visual-card strong,
.product-visual-card strong,
.blog-visual-card strong,
.faq-visual-card strong,
.contact-visual-card strong{
  display:block;
  color:var(--primary);
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  margin-bottom:8px;
}

.about-visual-card span,
.capability-visual-card span,
.product-visual-card span,
.blog-visual-card span,
.faq-visual-card span,
.contact-visual-card span{
  display:block;
  color:#475569;
  font-size:14px;
  line-height:1.55;
  font-weight:700;
}

/* Cards */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.card,
.capability-card,
.contact-card,
.process-item,
.rich-card,
.difference-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:19px;
  padding:28px;
  box-shadow:0 14px 40px rgba(15,23,42,.05);
  transition:.25s ease;
  height:100%;
  position:relative;
  overflow:hidden;
}

.card:hover,
.capability-card:hover,
.contact-card:hover,
.process-item:hover,
.difference-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 54px rgba(15,23,42,.10);
  border-color:rgba(94,87,253,.22);
}

.icon,
.contact-icon{
  width:52px;
  height:52px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft-blue);
  color:var(--primary);
  font-size:18px;
  font-weight:800;
  margin-bottom:18px;
}

.icon i,
.contact-icon i{
  display:block;
  line-height:1;
  font-size:17px;
}

.card h3,
.capability-card h3,
.contact-card h3,
.process-item h3{
  color:var(--dark);
  font-size:19px;
  line-height:1.3;
  margin-bottom:10px;
  font-weight:800;
}

.card p,
.capability-card p,
.contact-card p,
.process-item p,
.why-item p{
  font-size:15px;
  line-height:1.75;
  color:#475569;
  font-weight:500;
}

/* Category Cards */
.category-card{
  padding:0;
  overflow:hidden;
}

.category-image{
  height:145px;
  position:relative;
  background-size:cover;
  background-position:center;
}

.category-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(94,87,253,.62),rgba(0,166,200,.28)),
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.22),transparent 28%);
}

.category-card-body{
  padding:24px 24px 26px;
}

.category-card .icon{
  margin-top:-50px;
  position:relative;
  z-index:2;
  background:#ffffff;
  box-shadow:0 14px 30px rgba(15,23,42,.12);
}

.category-gastro{background-image:url("/assets/img/api-gastro.webp");}
.category-oncology{background-image:url("/assets/img/api-oncology.webp");}
.category-cardio{background-image:url("/assets/img/api-cardio.webp");}
.category-diabetic{background-image:url("/assets/img/api-diabetic.webp");}
.category-antibiotic{background-image:url("/assets/img/api-antibiotic.webp");}
.category-cns{background-image:url("/assets/img/api-cns.webp");}
.category-pain{background-image:url("/assets/img/api-pain.webp");}
.category-hormonal{background-image:url("/assets/img/api-hormonal.webp");}

/* Highlight / Why */
.highlight-box{
  background:linear-gradient(135deg,var(--primary),#2d2a9f);
  color:#ffffff;
  border-radius:26px;
  padding:42px;
  overflow:hidden;
  position:relative;
}

.highlight-box::after{
  content:"";
  position:absolute;
  right:-95px;
  bottom:-105px;
  width:250px;
  height:250px;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat;
  opacity:.075;
  filter:brightness(0) invert(1);
  pointer-events:none;
}

.highlight-box .eyebrow,
.enquiry-box .eyebrow{
  color:#ffffff;
}

.highlight-box .eyebrow::before,
.enquiry-box .eyebrow::before{
  background:rgba(255,255,255,.88);
}

.highlight-box h2{
  position:relative;
  z-index:1;
  color:#ffffff;
  font-size:35px;
  line-height:1.2;
  margin-bottom:16px;
  font-weight:800;
}

.highlight-box p{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.88);
  margin-bottom:24px;
  font-weight:500;
}

.highlight-box .btn{
  position:relative;
  z-index:1;
}

.why-list{
  display:grid;
  gap:16px;
}

.why-item{
  display:flex;
  gap:15px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:17px;
  padding:18px;
  transition:.3s ease;
}

.why-item:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 48px rgba(15,23,42,.10);
}

.why-item .icon{
  margin:0;
  flex-shrink:0;
  width:46px;
  height:46px;
}

.why-item b{
  color:var(--dark);
  display:block;
  font-size:16px;
  line-height:1.35;
  margin-bottom:5px;
  font-weight:800;
}

/* Product / Blog Cards */
.products-grid,
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.product-card,
.blog-card,
.capability-card.has-image{
  padding:0;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 14px 40px rgba(15,23,42,.05);
  transition:.25s ease;
}

.product-card:hover,
.blog-card:hover,
.capability-card.has-image:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 54px rgba(15,23,42,.10);
}

.product-media,
.blog-media,
.card-media{
  height:180px;
  background-size:cover;
  background-position:center;
  position:relative;
}

.product-media::after,
.blog-media::after,
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.16));
}

.product-body,
.blog-body,
.card-body{
  padding:24px;
}

.product-tag,
.blog-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(94,87,253,.09);
  color:var(--primary);
  font-size:12px;
  line-height:1;
  font-weight:800;
  margin-bottom:14px;
}

.product-link,
.blog-link,
.api-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-size:14px;
  font-weight:800;
}

.product-link i,
.blog-link i,
.api-link i{
  font-size:12px;
  transition:.2s ease;
}

.product-link:hover i,
.blog-link:hover i,
.api-link:hover i{
  transform:translateX(4px);
}

.media-gastro{background-image:url("/assets/img/api-gastro.webp");}
.media-oncology{background-image:url("/assets/img/api-oncology.webp");}
.media-cardio{background-image:url("/assets/img/api-cardio.webp");}
.media-diabetic{background-image:url("/assets/img/api-diabetic.webp");}
.media-antibiotic{background-image:url("/assets/img/api-antibiotic.webp");}
.media-cns{background-image:url("/assets/img/api-cns.webp");}
.media-pain{background-image:url("/assets/img/api-pain.webp");}
.media-hormonal{background-image:url("/assets/img/api-hormonal.webp");}
.media-sourcing{background-image:url("/assets/img/api-sourcing.webp");}
.media-documentation{background-image:url("/assets/img/api-documentation.webp");}
.media-export{background-image:url("/assets/img/api-export.webp");}
.media-procurement{background-image:url("/assets/img/api-procurement.webp");}
.media-quality{background-image:url("/assets/img/api-quality.webp");}
.media-market{background-image:url("/assets/img/api-market.webp");}

/* API Carousel - Smooth Premium Slider */
.api-carousel-wrap{
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr 54px;
  align-items:center;
  gap:18px;
  padding:24px 0 14px;
  overflow:visible;
}

.api-carousel{
  width:100%;
  max-width:1080px;
  height:560px;
  position:relative;
  overflow:hidden;
  margin:0 auto;
  perspective:1200px;
}

.api-slide{
  position:absolute;
  top:38px;
  left:50%;
  width:390px;
  max-width:86%;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) scale(.74);
  transition:
    transform .85s cubic-bezier(.22,.75,.26,1),
    opacity .75s ease,
    filter .75s ease,
    z-index .2s ease;
  filter:blur(2px) saturate(.78);
  z-index:0;
  will-change:transform, opacity, filter;
}

.api-slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) scale(1);
  filter:blur(0) saturate(1);
  z-index:6;
}

.api-slide.is-prev{
  opacity:.56;
  pointer-events:auto;
  transform:translateX(calc(-50% - 330px)) scale(.84);
  filter:blur(.7px) saturate(.82);
  z-index:3;
}

.api-slide.is-next{
  opacity:.56;
  pointer-events:auto;
  transform:translateX(calc(-50% + 330px)) scale(.84);
  filter:blur(.7px) saturate(.82);
  z-index:3;
}

.api-slide.is-far-prev{
  opacity:.16;
  transform:translateX(calc(-50% - 585px)) scale(.68);
  filter:blur(2.5px) saturate(.65);
  z-index:1;
}

.api-slide.is-far-next{
  opacity:.16;
  transform:translateX(calc(-50% + 585px)) scale(.68);
  filter:blur(2.5px) saturate(.65);
  z-index:1;
}

.api-card{
  background:#ffffff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(15,23,42,.08);
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}

.api-slide.is-active .api-card{
  border-color:rgba(94,87,253,.26);
  box-shadow:0 34px 95px rgba(15,23,42,.18);
}

.api-slide:not(.is-active) .api-card{
  box-shadow:0 16px 42px rgba(15,23,42,.055);
}

.api-card:hover{
  transform:translateY(-5px);
}

.api-image{
  height:176px;
  position:relative;
  background-size:cover;
  background-position:center;
  transition:height .65s cubic-bezier(.22,.75,.26,1);
}

.api-slide.is-active .api-image{
  height:210px;
}

.api-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(94,87,253,.48),rgba(0,166,200,.22)),
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.18),transparent 28%);
}

.api-paracetamol{background-image:url("/assets/img/api-pain.webp");}
.api-ibuprofen{background-image:url("/assets/img/api-gastro.webp");}
.api-diclofenac{background-image:url("/assets/img/api-oncology.webp");}
.api-metformin{background-image:url("/assets/img/api-diabetic.webp");}
.api-azithromycin{background-image:url("/assets/img/api-antibiotic.webp");}
.api-pantoprazole{background-image:url("/assets/img/api-cns.webp");}

.api-body{
  padding:27px;
}

.api-slide:not(.is-active) .api-body{
  padding:23px;
}

.api-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(94,87,253,.09);
  color:var(--primary);
  font-size:12px;
  line-height:1;
  font-weight:800;
  margin-bottom:14px;
}

.api-body h3{
  color:var(--dark);
  font-size:20px;
  line-height:1.3;
  margin-bottom:10px;
  font-weight:800;
}

.api-slide.is-active .api-body h3{
  font-size:24px;
  letter-spacing:-.35px;
}

.api-body p{
  font-size:15px;
  line-height:1.75;
  color:#475569;
  font-weight:500;
  margin-bottom:20px;
}

.api-nav{
  width:52px;
  height:52px;
  border:1px solid rgba(94,87,253,.24);
  border-radius:50%;
  background:#ffffff;
  color:var(--primary);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
  transition:.28s ease;
  z-index:10;
}

.api-nav:hover{
  background:var(--primary);
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(94,87,253,.26);
}

.api-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:-4px;
}

.api-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  background:#cbd5e1;
  cursor:pointer;
  transition:.28s ease;
}

.api-dot.is-active{
  width:30px;
  background:var(--primary);
}

.api-note{
  margin-top:42px;
  padding:30px;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(94,87,253,.09),rgba(0,166,200,.05)),
    #ffffff;
  border:1px solid rgba(94,87,253,.18);
  text-align:center;
  box-shadow:0 16px 42px rgba(15,23,42,.045);
}

.api-note strong{
  display:block;
  color:var(--dark);
  font-size:24px;
  line-height:1.25;
  font-weight:800;
  margin-bottom:9px;
}

.api-note p{
  max-width:820px;
  margin:0 auto 20px;
  color:#475569;
  font-size:15.5px;
  line-height:1.75;
}

/* Presence */
.presence-section{
  background:
    radial-gradient(circle at 12% 18%, rgba(94,87,253,.08), transparent 28%),
    radial-gradient(circle at 92% 62%, rgba(0,166,200,.05), transparent 26%),
    #ffffff;
}

.presence-map-card{
  position:relative;
  border-radius:30px;
  background:
    linear-gradient(135deg, rgba(248,251,255,.98), rgba(241,240,255,.98)),
    #ffffff;
  border:1px solid rgba(94,87,253,.14);
  box-shadow:0 26px 80px rgba(15,23,42,.08);
  overflow:hidden;
}

.presence-map-stage{
  position:relative;
  min-height:600px;
  padding:18px 22px 22px;
}

.presence-world-map{
  position:absolute;
  inset:24px 18px 18px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.presence-world-map img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.58;
  filter:
    invert(38%)
    sepia(88%)
    saturate(2300%)
    hue-rotate(225deg)
    brightness(100%)
    contrast(101%)
    drop-shadow(0 18px 32px rgba(94,87,253,.10));
}

.presence-routes{
  position:absolute;
  inset:24px 18px 18px;
  width:calc(100% - 36px);
  height:calc(100% - 42px);
  z-index:2;
  pointer-events:none;
}

.route{
  fill:none;
  stroke:#5E57FD;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:10 9;
  opacity:.84;
  filter:url(#presenceGlow);
  animation:routeFlow 2.8s linear infinite;
}

@keyframes routeFlow{
  from{stroke-dashoffset:0;}
  to{stroke-dashoffset:-38;}
}

.origin-pulse{
  fill:rgba(94,87,253,.18);
  transform-origin:756px 365px;
  animation:originPulse 2.2s ease-in-out infinite;
}

.origin-core{
  fill:#5E57FD;
  filter:url(#presenceGlow);
}

@keyframes originPulse{
  0%,100%{
    transform:scale(1);
    opacity:.72;
  }
  50%{
    transform:scale(1.35);
    opacity:.28;
  }
}

.presence-point{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  z-index:3;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(94,87,253,.28);
  box-shadow:0 10px 26px rgba(94,87,253,.18);
  cursor:pointer;
  transition:.25s ease;
  outline:none;
}

.presence-point:hover,
.presence-point:focus{
  transform:translate(-50%,-62%);
  border-color:rgba(94,87,253,.55);
  box-shadow:0 16px 38px rgba(94,87,253,.28);
}

.pin-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#5E57FD;
  box-shadow:0 0 0 5px rgba(94,87,253,.16);
}

.presence-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(8px);
  min-width:230px;
  padding:14px 15px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.16);
  box-shadow:0 20px 50px rgba(15,23,42,.15);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.25s ease;
  text-align:center;
}

.presence-tooltip b{
  display:block;
  color:var(--dark);
  font-size:15px;
  line-height:1.2;
  margin-bottom:5px;
}

.presence-tooltip span{
  display:block;
  color:#475569;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}

.presence-point:hover .presence-tooltip,
.presence-point:focus .presence-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.presence-minor{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  z-index:2;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.22);
  box-shadow:0 0 0 5px rgba(94,87,253,.10);
  color:transparent;
  overflow:hidden;
}

.presence-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:24px;
}

.presence-stat{
  background:#ffffff;
  border:1px solid rgba(94,87,253,.14);
  border-radius:20px;
  padding:22px;
  text-align:center;
  box-shadow:0 14px 40px rgba(15,23,42,.045);
}

.presence-stat strong{
  display:block;
  color:#5E57FD;
  font-size:24px;
  line-height:1.1;
  font-weight:800;
  margin-bottom:7px;
}

.presence-stat span{
  color:#475569;
  font-size:14px;
  font-weight:700;
}

/* Search / Filter */
.portfolio-search-box,
.blog-search-box,
.faq-search-box{
  background:#ffffff;
  border:1px solid rgba(94,87,253,.16);
  border-radius:28px;
  padding:28px;
  margin-top:-42px;
  position:relative;
  z-index:5;
  box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.search-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr auto;
  gap:14px;
  align-items:center;
}

.search-field{
  position:relative;
}

.search-field i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--primary);
  font-size:14px;
}

.search-field input,
.search-field select{
  width:100%;
  border:1px solid var(--border);
  border-radius:999px;
  padding:14px 16px 14px 42px;
  outline:0;
  color:#1e293b;
  font-size:14px;
  font-weight:600;
  background:#ffffff;
  transition:.2s ease;
}

.search-field select{
  appearance:none;
}

.search-field input:focus,
.search-field select:focus{
  border-color:rgba(94,87,253,.45);
  box-shadow:0 0 0 4px rgba(94,87,253,.10);
}

.category-pills{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:42px;
}

.category-pill{
  padding:10px 16px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.16);
  color:#334155;
  font-size:13.5px;
  line-height:1;
  font-weight:800;
  transition:.25s ease;
  cursor:pointer;
}

.category-pill:hover,
.category-pill.active{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(94,87,253,.20);
}

/* Process */
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  counter-reset:process;
}

.process-grid.five{
  grid-template-columns:repeat(5,1fr);
}

.process-item::before{
  counter-increment:process;
  content:"0" counter(process);
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),#4941e8);
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  margin-bottom:18px;
}

/* Forms / Enquiry */
.enquiry-box{
  background:linear-gradient(135deg,var(--primary),#2d2a9f);
  color:#ffffff;
  border-radius:30px;
  padding:48px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:38px;
  align-items:center;
  box-shadow:0 24px 70px rgba(94,87,253,.22);
  position:relative;
  overflow:hidden;
}

.enquiry-box::after{
  content:"";
  position:absolute;
  left:-125px;
  bottom:-165px;
  width:320px;
  height:320px;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat;
  opacity:.055;
  filter:brightness(0) invert(1);
  pointer-events:none;
}

.enquiry-box > div,
.enquiry-box form{
  position:relative;
  z-index:1;
}

.enquiry-box h2{
  color:#ffffff;
  font-size:35px;
  line-height:1.2;
  margin-bottom:14px;
  font-weight:800;
}

.enquiry-box p{
  color:rgba(255,255,255,.88);
  margin-bottom:22px;
  font-size:16.5px;
  line-height:1.75;
  font-weight:500;
}

.enquiry-box .content-points li{
  color:#ffffff;
}

.enquiry-box .content-points li::before{
  background:rgba(255,255,255,.16);
  color:#ffffff;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-grid input,
.form-grid textarea,
.form-grid select{
  width:100%;
  border:0;
  outline:0;
  border-radius:10px;
  padding:14px 15px;
  font-size:14.5px;
  font-weight:500;
  color:var(--dark);
}

.form-grid input::placeholder,
.form-grid textarea::placeholder{
  color:#64748b;
  font-weight:500;
}

.form-grid textarea{
  grid-column:1/-1;
  min-height:112px;
  resize:vertical;
}

.form-grid button{
  grid-column:1/-1;
  border:0;
}

/* FAQ */
.faq-layout{
  display:grid;
  grid-template-columns:.35fr .65fr;
  gap:32px;
  align-items:start;
}

.faq-sidebar{
  position:sticky;
  top:112px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:26px;
  box-shadow:0 18px 54px rgba(15,23,42,.06);
}

.faq-sidebar h3{
  color:var(--dark);
  font-size:22px;
  line-height:1.25;
  font-weight:800;
  margin-bottom:12px;
}

.faq-sidebar p{
  color:#64748b;
  font-size:14.5px;
  line-height:1.75;
  margin-bottom:18px;
}

.sidebar-list{
  display:grid;
  gap:10px;
}

.sidebar-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(94,87,253,.10);
  color:#1e293b;
  font-size:14px;
  font-weight:800;
  transition:.25s ease;
}

.sidebar-list a:hover{
  background:rgba(94,87,253,.08);
  color:var(--primary);
  transform:translateX(3px);
}

.faq-group{
  margin-bottom:34px;
}

.faq-group-title{
  margin-bottom:16px;
}

.faq-group-title h2{
  color:var(--dark);
  font-size:30px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.6px;
}

.faq-list{
  display:grid;
  gap:14px;
}

.faq-item{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(15,23,42,.045);
  transition:.25s ease;
}

.faq-question{
  width:100%;
  border:0;
  background:#ffffff;
  color:#0f172a;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  text-align:left;
  cursor:pointer;
  font-size:16px;
  line-height:1.45;
  font-weight:800;
}

.faq-question span{
  color:#0f172a;
  font-weight:800;
}

.faq-question i{
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--soft-blue);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  transition:.25s ease;
}

.faq-item.active .faq-question i{
  transform:rotate(180deg);
  background:var(--primary);
  color:#ffffff;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}

.faq-answer-inner{
  padding:0 24px 24px;
  color:#64748b;
  font-size:15.5px;
  line-height:1.8;
}

.faq-answer-inner p{
  color:#64748b;
  font-size:15.5px;
  line-height:1.8;
  margin-bottom:12px;
}

/* Footer */
.footer{
  background:
    radial-gradient(circle at 85% 18%, rgba(94,87,253,.24), transparent 30%),
    radial-gradient(circle at 12% 85%, rgba(0,166,200,.10), transparent 26%),
    linear-gradient(135deg, #171443 0%, #0b1026 46%, #060816 100%);
  color:#cbd5e1;
  padding:58px 0 22px;
  position:relative;
  overflow:hidden;
}

.footer::after{
  content:"";
  position:absolute;
  right:-160px;
  bottom:-185px;
  width:400px;
  height:400px;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat;
  opacity:.032;
  filter:brightness(0) invert(1);
  pointer-events:none;
}

.footer-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.35fr .9fr 1fr 1fr 1fr;
  gap:30px;
  margin-bottom:38px;
}

.footer-logo{
  display:inline-flex;
  align-items:center;
  line-height:0;
}

.footer-logo img{
  height:44px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  object-position:left center;
  display:block;
  filter:brightness(0) invert(1);
  margin-bottom:16px;
}

.footer h4{
  color:#ffffff;
  margin-bottom:17px;
  font-size:17px;
  font-weight:800;
}

.footer a{
  display:block;
  margin-bottom:10px;
  font-size:14.5px;
  line-height:1.55;
  color:#cbd5e1;
  transition:.2s ease;
  font-weight:500;
}

.footer a:hover{
  color:#ffffff;
  transform:translateX(3px);
}

.footer p{
  font-size:14.5px;
  line-height:1.75;
  font-weight:500;
}

.footer-social{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}

.footer-social a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
  transition:.25s ease;
}

.footer-social a:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:#ffffff;
  transform:translateY(-3px);
}

.footer-contact-list{
  display:grid;
  gap:12px;
}

.footer-contact-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  color:#cbd5e1;
  font-size:14.5px;
  line-height:1.55;
  font-weight:500;
}

.footer-contact-icon{
  width:28px;
  height:28px;
  flex-shrink:0;
  border-radius:8px;
  background:rgba(94,87,253,.16);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}

.footer-contact-icon i{
  display:block;
  font-size:13px;
  line-height:1;
}

.footer-contact-item a,
.footer-contact-item span{
  color:#cbd5e1;
  margin-bottom:0;
}

.footer-contact-item a:hover{
  color:#ffffff;
  transform:none;
}

.copyright{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:20px;
  font-size:13px;
  text-align:center;
  font-weight:500;
}

/* WhatsApp */
.whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:100;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--success);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  animation:pulseWhatsApp 3s ease-in-out infinite;
}

.whatsapp i{
  display:block;
  font-size:30px;
  line-height:1;
}

/* Basic Content Protection */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

input,
textarea,
select,
button{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

img{
  -webkit-user-drag:none;
  user-drag:none;
}

/* Responsive */
@media(max-width:1180px){
  .menu-toggle{
    display:flex;
    flex-shrink:0;
  }

  .nav-links{
    position:fixed;
    top:84px;
    left:0;
    right:0;
    z-index:99;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    background:#ffffff;
    border-bottom:1px solid var(--border);
    box-shadow:0 28px 60px rgba(15,23,42,.12);
    padding:14px 4%;
    margin-left:0;
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:.28s ease;
  }

  .menu-open .nav-links{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-links a{
    width:100%;
    padding:15px 0;
    margin:0;
    border-bottom:1px solid var(--border);
    font-size:15px;
    line-height:1.35;
  }

  .nav-links a::after{
    display:none;
  }

  .page-hero{
    min-height:380px;
    background-position:center right;
  }

  .page-hero-grid{
    display:block;
  }

  .page-hero h1,
  .page-hero p{
    max-width:720px;
  }

  .home-company-grid,
  .about-grid,
  .why-wrap,
  .enquiry-box,
  .faq-layout{
    grid-template-columns:1fr;
  }

  .home-company-content{
    max-width:100%;
  }

  .home-company-visual{
    max-width:720px;
    width:100%;
    margin:auto;
  }

  .home-company-floating{
    right:18px;
  }

  .cards-grid,
  .credentials-grid,
  .products-grid,
  .blog-grid,
  .process-grid,
  .process-grid.five{
    grid-template-columns:repeat(2,1fr);
  }

  .credentials-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }

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

  .api-carousel{
    max-width:760px;
    height:530px;
  }

  .api-slide{
    width:360px;
  }

  .api-slide.is-prev{
    transform:translateX(calc(-50% - 265px)) scale(.80);
  }

  .api-slide.is-next{
    transform:translateX(calc(-50% + 265px)) scale(.80);
  }

  .api-slide.is-far-prev,
  .api-slide.is-far-next{
    opacity:0;
  }

  .presence-map-stage{
    min-height:540px;
  }

  .presence-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .search-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  body{
    font-size:15.5px;
  }

  .navbar{
    height:74px;
  }

  .logo img{
    height:32px;
    width:auto;
    max-width:140px;
    object-fit:contain;
  }

  .footer-logo img{
    height:32px;
    width:auto;
    max-width:140px;
    object-fit:contain;
  }

  .nav-links{
    top:74px;
  }

  .hero{
    padding:78px 0 68px;
  }

  .hero h1{
    font-size:38px;
    line-height:1.12;
    letter-spacing:-1.1px;
  }

  .hero-audience{
    width:auto;
    max-width:100%;
    flex-wrap:wrap;
    line-height:1.35;
    margin:-8px auto 22px;
    font-size:13.5px;
  }

  .hero-audience span{
    min-width:auto;
    text-align:center;
  }

  .hero p{
    font-size:16.5px;
    line-height:1.75;
  }

  .hero-rotate-wrap{
    min-height:180px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:52px;
    font-size:14.5px;
  }

  .page-hero{
    min-height:auto;
    padding:72px 0 62px;
    background:
      linear-gradient(180deg,rgba(248,251,255,.97) 0%,rgba(248,251,255,.88) 58%,rgba(248,251,255,.76) 100%),
      linear-gradient(135deg,rgba(94,87,253,.10),rgba(0,166,200,.08)),
      var(--page-hero-image, url("/assets/img/api-lab.webp")) center/cover no-repeat;
  }

  .page-molecule-canvas{
    opacity:.34;
  }

  .page-hero::after{
    width:100%;
    opacity:.28;
    mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  }

  .page-hero .breadcrumb{
    font-size:12.8px;
    margin-bottom:18px;
  }

  .page-hero h1{
    font-size:38px;
    line-height:1.12;
    letter-spacing:-1.2px;
  }

  .page-hero p{
    font-size:16px;
    line-height:1.74;
  }

  .page-hero-grid > div:first-child::after{
    margin-top:22px;
  }

  .section{
    padding:68px 0;
  }

  .eyebrow{
    font-size:11.8px;
    letter-spacing:.13em;
    gap:10px;
    margin-bottom:14px;
  }

  .eyebrow::before{
    width:32px;
  }

  .section-title{
    margin-bottom:38px;
  }

  .section-title h2{
    font-size:34px;
    line-height:1.12;
    letter-spacing:-1px;
  }

  .section-title p{
    font-size:16px;
    line-height:1.76;
  }

  .content-block h2,
  .highlight-box h2,
  .enquiry-box h2{
    font-size:30px;
    line-height:1.2;
  }

  .content-block p{
    font-size:16px;
  }

  .home-company-grid{
    gap:30px;
  }

  .home-company-visual{
    min-height:auto;
  }

  .home-company-image{
    min-height:360px;
    border-radius:26px;
    clip-path:none;
  }

  .home-company-floating{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    margin-top:16px;
  }

  .home-company-badge{
    max-width:none;
    left:16px;
    right:16px;
    bottom:16px;
    padding:17px;
    border-radius:18px;
  }

  .home-company-badge strong{
    font-size:17px;
  }

  .home-company-content h2{
    font-size:34px;
    line-height:1.12;
    letter-spacing:-1px;
  }

  .home-company-content p{
    font-size:16px;
    line-height:1.78;
  }

  .home-company-points{
    grid-template-columns:1fr;
    margin:22px 0 24px;
  }

  .home-company-actions,
  .home-company-actions .btn,
  .hero-actions,
  .hero-actions .btn,
  .btn{
    width:100%;
  }

  .credentials-grid,
  .cards-grid,
  .products-grid,
  .blog-grid,
  .process-grid,
  .process-grid.five,
  .footer-grid,
  .form-grid{
    grid-template-columns:1fr;
  }

  .about-image,
  .split-visual{
    min-height:340px;
    border-radius:26px;
  }

  .about-visual,
  .capability-visual,
  .product-visual,
  .blog-visual,
  .faq-visual,
  .contact-visual{
    min-height:330px;
    border-radius:24px;
  }

  .about-visual-card,
  .capability-visual-card,
  .product-visual-card,
  .blog-visual-card,
  .faq-visual-card,
  .contact-visual-card{
    left:16px;
    right:16px;
    bottom:16px;
    padding:17px;
    border-radius:18px;
  }

  .about-visual-card strong,
  .capability-visual-card strong,
  .product-visual-card strong,
  .blog-visual-card strong,
  .faq-visual-card strong,
  .contact-visual-card strong{
    font-size:18px;
  }

  .about-visual-card span,
  .capability-visual-card span,
  .product-visual-card span,
  .blog-visual-card span,
  .faq-visual-card span,
  .contact-visual-card span{
    font-size:13.5px;
  }

  .highlight-box,
  .enquiry-box{
    padding:28px 22px;
    border-radius:22px;
  }

  .category-image{
    height:170px;
  }

  .portfolio-search-box,
  .blog-search-box,
  .faq-search-box{
    margin-top:-24px;
    padding:22px;
    border-radius:22px;
  }

  .api-carousel-wrap{
    display:block;
    padding-top:8px;
  }

  .api-carousel{
    height:auto;
    display:flex;
    justify-content:flex-start;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:8px 4px 18px;
    gap:16px;
  }

  .api-carousel::-webkit-scrollbar{
    display:none;
  }

  .api-slide,
  .api-slide.is-active,
  .api-slide.is-prev,
  .api-slide.is-next,
  .api-slide.is-far-prev,
  .api-slide.is-far-next{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    max-width:none;
    flex:0 0 88%;
    transform:none;
    opacity:1;
    filter:none;
    pointer-events:auto;
    scroll-snap-align:center;
  }

  .api-slide.is-active .api-image,
  .api-image{
    height:176px;
  }

  .api-nav{
    display:none;
  }

  .api-dots{
    margin-top:4px;
  }

  .api-note{
    margin-top:30px;
    padding:24px 18px;
  }

  .api-note strong{
    font-size:21px;
  }

  .presence-map-stage{
    min-height:460px;
    padding:10px 10px 14px;
  }

  .presence-world-map,
  .presence-routes{
    inset:20px 10px 12px;
    width:calc(100% - 20px);
    height:calc(100% - 32px);
  }

  .presence-world-map img{
    opacity:.62;
  }

  .presence-point{
    width:18px;
    height:18px;
    padding:0;
  }

  .pin-dot{
    width:8px;
    height:8px;
    box-shadow:0 0 0 4px rgba(94,87,253,.15);
  }

  .presence-tooltip{
    min-width:170px;
    padding:11px 12px;
  }

  .presence-minor{
    display:none;
  }

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

  .product-media,
  .blog-media,
  .card-media{
    height:170px;
  }

  .faq-question{
    padding:18px 20px;
    font-size:15px;
  }

  .faq-answer-inner{
    padding:0 20px 20px;
  }

  .whatsapp{
    width:54px;
    height:54px;
    right:18px;
    bottom:18px;
  }

  .whatsapp i{
    font-size:28px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
.blank-process-card{
  min-height:260px;
  background:#ffffff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 14px 40px rgba(15,23,42,.045);
}

.blank-process-card::before{
  opacity:.18;
}

.blank-process-card h3,
.blank-process-card p{
  visibility:hidden;
}
/* Therapeutic Category JS Auto Slider with Drag + Controls */
.category-slider-shell{
  position:relative;
  max-width:1220px;
  margin:0 auto;
  display:grid;
  grid-template-columns:58px 1fr 58px;
  align-items:center;
  gap:16px;
}

.category-auto-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:12px 0 34px;
  cursor:grab;
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.category-auto-slider.is-dragging{
  cursor:grabbing;
}

.category-auto-track{
  display:flex;
  align-items:stretch;
  gap:26px;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.category-auto-track .category-card{
  flex:0 0 285px;
  min-width:285px;
  max-width:285px;
  transition:
    transform .45s cubic-bezier(.22,.75,.26,1),
    box-shadow .45s ease,
    border-color .45s ease;
}

.category-auto-track .category-card:hover{
  transform:translateY(-10px) scale(1.018);
  box-shadow:0 28px 70px rgba(15,23,42,.13);
  border-color:rgba(94,87,253,.28);
}

.category-auto-track .category-image{
  height:168px;
  overflow:hidden;
}

.category-auto-track .category-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .85s ease;
  z-index:2;
}

.category-auto-track .category-card:hover .category-image::before{
  transform:translateX(120%);
}

.category-slider-btn{
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid rgba(94,87,253,.22);
  background:#ffffff;
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 16px 42px rgba(15,23,42,.10);
  transition:.28s ease;
  z-index:5;
}

.category-slider-btn:hover{
  background:var(--primary);
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 20px 52px rgba(94,87,253,.24);
}

.category-slider-btn i{
  font-size:16px;
  line-height:1;
}

@media(max-width:760px){
  .category-slider-shell{
    max-width:100%;
    grid-template-columns:1fr;
    gap:10px;
  }

  .category-slider-btn{
    display:none;
  }

  .category-auto-slider{
    padding:8px 0 26px;
    mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }

  .category-auto-track{
    gap:18px;
  }

  .category-auto-track .category-card{
    flex:0 0 82vw;
    min-width:82vw;
    max-width:82vw;
  }
}

/* ---------- Therapeutic category slider ---------- */

.category-slider-shell{
  max-width:1240px;
  margin:0 auto;
}

.category-auto-slider{
  padding:14px 0 42px;
}

.category-auto-track{
  gap:28px;
}

.category-auto-track .category-card{
  flex:0 0 305px;
  min-width:305px;
  max-width:305px;
}

.category-auto-track .category-image{
  height:178px;
}

.category-card-body{
  min-height:220px;
  padding:54px 28px 30px;
}

.category-card-body h3{
  line-height:1.18;
}

.category-card-body p{
  line-height:1.65;
}

/* =========================================================
   Therapeutic Category Slider - Equal Card Height Fix
   Add at END of main CSS file
========================================================= */

.category-auto-track{
  align-items:stretch;
}

.category-auto-track .category-card{
  display:flex;
  flex-direction:column;
  height:430px;
  overflow:hidden;
}

.category-auto-track .category-image{
  flex:0 0 168px;
  height:168px;
}

.category-auto-track .category-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:0;
  padding:54px 28px 30px;
}

.category-auto-track .category-card-body .icon{
  flex:0 0 auto;
}

.category-auto-track .category-card-body h3{
  min-height:64px;
  margin-bottom:12px;
  line-height:1.18;
}

.category-auto-track .category-card-body p{
  min-height:96px;
  line-height:1.6;
  margin-bottom:0;
}

/* Desktop slightly bigger cards if needed */
@media(min-width:761px){
  .category-auto-track .category-card{
    height:430px;
  }
}

/* Mobile equal height */
@media(max-width:760px){
  .category-auto-track .category-card{
    height:420px;
  }

  .category-auto-track .category-image{
    flex-basis:165px;
    height:165px;
  }

  .category-auto-track .category-card-body{
    padding:50px 24px 28px;
  }

  .category-auto-track .category-card-body h3{
    min-height:58px;
  }

  .category-auto-track .category-card-body p{
    min-height:92px;
  }
}

@media(max-width:420px){
  .category-auto-track .category-card{
    height:405px;
  }

  .category-auto-track .category-image{
    flex-basis:156px;
    height:156px;
  }
}

/* =========================================================
   CLAYRAS RESPONSIVE FINAL CLEAN OVERRIDES
   Default.php mobile repair + API Portfolio + Therapeutic slider
   Content and JS functionality unchanged
   Last updated: final organized mobile layer
========================================================= */

@media(max-width:760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  main,
  .section,
  .container{
    max-width:100%;
    overflow-x:hidden;
  }

  .container{
    width:min(100% - 34px, 1180px);
  }

  .section{
    padding:58px 0;
  }

  .section-title{
    max-width:100%;
    margin-bottom:28px!important;
    padding:0;
    text-align:center;
  }

  .section-title h2{
    font-size:clamp(27px, 7.8vw, 36px)!important;
    line-height:1.12!important;
    letter-spacing:-.85px!important;
    margin-bottom:14px!important;
  }

  .section-title p{
    max-width:100%!important;
    font-size:14.7px!important;
    line-height:1.68!important;
  }

  .eyebrow{
    font-size:11px!important;
    letter-spacing:.13em!important;
    gap:9px!important;
    margin-bottom:13px!important;
  }

  .eyebrow::before{
    width:30px!important;
  }

  .btn,
  .hero-actions .btn,
  .home-company-actions .btn{
    width:100%;
    justify-content:center;
  }

  .hero{
    min-height:auto!important;
    padding:82px 0 54px!important;
    text-align:center;
  }

  .hero-grid{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    max-width:100%!important;
    text-align:center!important;
  }

  .hero h1{
    max-width:100%!important;
    font-size:clamp(33px, 9.6vw, 44px)!important;
    line-height:1.08!important;
    letter-spacing:-1px!important;
    margin:0 auto 16px!important;
    text-align:center!important;
  }

  .hero h1 span{
    display:inline!important;
  }

  .hero-audience{
    max-width:100%!important;
    margin:0 auto 18px!important;
    padding:8px 13px!important;
    font-size:12.7px!important;
    line-height:1.38!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
  }

  .hero-audience span{
    min-width:0!important;
    text-align:center!important;
  }

  .hero-rotate-wrap{
    min-height:178px!important;
    width:100%!important;
  }

  .hero-rotate-wrap p,
  .hero p{
    max-width:100%!important;
    font-size:15.2px!important;
    line-height:1.68!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #heroRotate{
    min-height:56px!important;
    line-height:1.62!important;
  }

  .hero-actions{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    margin-top:24px!important;
  }

  #moleculeCanvas{
    opacity:.24!important;
  }

  .hero-brand-shape,
  .hero .brand-bg-shape{
    opacity:.14!important;
    transform:scale(.68) rotate(-12deg)!important;
    right:-46%!important;
    top:7%!important;
  }

  .credentials{
    padding:24px 0!important;
  }

  .credentials-grid,
  .cards-grid,
  .products-grid,
  .blog-grid,
  .process-grid,
  .process-grid.five,
  .form-grid{
    grid-template-columns:1fr!important;
  }

  .credentials-grid{
    gap:13px!important;
  }

  .credential-card{
    padding:17px 15px!important;
    text-align:center!important;
  }

  .home-company-grid,
  .about-grid,
  .why-wrap,
  .enquiry-box{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }

  .home-company-image{
    min-height:340px!important;
    border-radius:24px!important;
    clip-path:none!important;
  }

  .home-company-floating{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin-top:16px!important;
  }

  .home-company-content h2,
  .content-block h2,
  .highlight-box h2,
  .enquiry-box h2{
    font-size:clamp(28px, 7.8vw, 36px)!important;
    line-height:1.14!important;
    letter-spacing:-.8px!important;
  }

  .home-company-content p,
  .content-block p,
  .highlight-box p,
  .enquiry-box p{
    font-size:14.9px!important;
    line-height:1.7!important;
  }

  .home-company-points{
    grid-template-columns:1fr!important;
  }

  .card,
  .process-item,
  .why-item{
    padding:22px 20px!important;
  }

  .enquiry-box{
    padding:28px 22px!important;
    border-radius:24px!important;
  }

  .form-grid input,
  .form-grid textarea,
  .form-grid select,
  .form-grid button{
    width:100%!important;
  }

  /* Therapeutic Coverage Slider - compact single focus */
  .category-slider-shell{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 38px!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }

  .category-auto-slider{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    border-radius:22px!important;
  }

  .category-auto-track{
    display:flex!important;
    align-items:stretch!important;
    gap:16px!important;
    width:max-content!important;
    will-change:transform!important;
  }

  .category-auto-track .category-card{
    flex:0 0 calc(100vw - 110px)!important;
    min-width:calc(100vw - 110px)!important;
    max-width:calc(100vw - 110px)!important;
    height:360px!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:#ffffff!important;
    box-shadow:0 16px 42px rgba(15,23,42,.10)!important;
  }

  .category-auto-track .category-image{
    width:100%!important;
    height:128px!important;
    min-height:128px!important;
    flex:0 0 128px!important;
    background-size:cover!important;
    background-position:center!important;
  }

  .category-auto-track .category-card-body{
    flex:1!important;
    padding:36px 18px 20px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }

  .category-auto-track .category-card .icon{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    margin-top:-58px!important;
    margin-bottom:13px!important;
    border-radius:15px!important;
    position:relative!important;
    z-index:2!important;
  }

  .category-auto-track .category-card-body h3{
    font-size:18px!important;
    line-height:1.2!important;
    letter-spacing:-.25px!important;
    min-height:0!important;
    margin:0 0 8px!important;
  }

  .category-auto-track .category-card-body p{
    font-size:13.5px!important;
    line-height:1.55!important;
    min-height:0!important;
    margin:0!important;
  }

  .category-slider-btn{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:50%!important;
    z-index:20!important;
    background:#ffffff!important;
    color:#5E57FD!important;
    border:1px solid rgba(94,87,253,.16)!important;
    box-shadow:0 10px 26px rgba(15,23,42,.13)!important;
  }

  .category-slider-prev{left:0!important;}
  .category-slider-next{right:0!important;}

  /* API Portfolio Carousel - mobile clean card */
  .api-carousel-wrap{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0 auto!important;
    overflow:visible!important;
  }

  .api-carousel{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    margin:0 auto!important;
    padding:0!important;
    perspective:none!important;
  }

  .api-slide,
  .api-slide.is-prev,
  .api-slide.is-next,
  .api-slide.is-far-prev,
  .api-slide.is-far-next{
    display:none!important;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    pointer-events:none!important;
    padding:0!important;
    z-index:0!important;
  }

  .api-slide.is-active{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    filter:none!important;
    z-index:5!important;
  }

  .api-card{
    width:calc(100vw - 112px)!important;
    max-width:292px!important;
    min-width:0!important;
    margin:0 auto!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:#ffffff!important;
    box-shadow:0 16px 42px rgba(15,23,42,.12)!important;
  }

  .api-image,
  .api-slide.is-active .api-image{
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    background-size:cover!important;
    background-position:center!important;
  }

  .api-body,
  .api-slide:not(.is-active) .api-body{
    padding:17px 17px 19px!important;
  }

  .api-tag{
    display:inline-flex!important;
    max-width:100%!important;
    margin-bottom:10px!important;
    padding:6px 11px!important;
    font-size:11.2px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  .api-body h3,
  .api-slide.is-active .api-body h3{
    font-size:19px!important;
    line-height:1.14!important;
    letter-spacing:-.25px!important;
    margin:0 0 8px!important;
    word-break:normal!important;
  }

  .api-body p{
    font-size:12.9px!important;
    line-height:1.48!important;
    margin:0 0 14px!important;
  }

  .api-link{
    font-size:13.2px!important;
    line-height:1.2!important;
    font-weight:800!important;
  }

  .api-nav{
    position:absolute!important;
    top:58px!important;
    transform:none!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:50%!important;
    z-index:20!important;
    background:#ffffff!important;
    color:#5E57FD!important;
    border:1px solid rgba(94,87,253,.16)!important;
    box-shadow:0 10px 26px rgba(15,23,42,.13)!important;
  }

  .api-prev{left:6px!important;}
  .api-next{right:6px!important;}

  .api-dots{
    margin-top:16px!important;
    display:flex!important;
    justify-content:center!important;
    gap:8px!important;
  }

  .api-dot{
    width:8px!important;
    height:8px!important;
  }

  .api-dot.is-active{
    width:24px!important;
  }

  .api-note{
    margin-top:24px!important;
    margin-bottom:82px!important;
    padding:22px 18px!important;
    border-radius:22px!important;
    text-align:center!important;
  }

  .api-note strong{
    font-size:20px!important;
    line-height:1.22!important;
  }

  .api-note p{
    font-size:14px!important;
    line-height:1.62!important;
  }

  .api-note .btn{
    width:100%!important;
    justify-content:center!important;
  }

  .whatsapp{
    width:54px!important;
    height:54px!important;
    right:18px!important;
    bottom:18px!important;
  }

  .whatsapp i{
    font-size:27px!important;
  }
}

@media(max-width:430px){
  .container{
    width:min(100% - 30px, 1180px);
  }

  .section-title h2{
    font-size:clamp(26px, 7.5vw, 34px)!important;
  }

  .category-slider-shell{
    padding:0 34px!important;
  }

  .category-auto-track .category-card{
    flex-basis:calc(100vw - 98px)!important;
    min-width:calc(100vw - 98px)!important;
    max-width:calc(100vw - 98px)!important;
    height:350px!important;
  }

  .category-auto-track .category-image{
    height:122px!important;
    min-height:122px!important;
    flex-basis:122px!important;
  }

  .category-auto-track .category-card-body{
    padding:34px 16px 18px!important;
  }

  .category-auto-track .category-card-body h3{
    font-size:17px!important;
  }

  .category-auto-track .category-card-body p{
    font-size:13.1px!important;
  }

  .api-card{
    width:calc(100vw - 106px)!important;
    max-width:284px!important;
  }

  .api-image,
  .api-slide.is-active .api-image{
    height:112px!important;
    min-height:112px!important;
  }

  .api-body,
  .api-slide:not(.is-active) .api-body{
    padding:16px 16px 18px!important;
  }

  .api-body h3,
  .api-slide.is-active .api-body h3{
    font-size:18.5px!important;
  }

  .api-body p{
    font-size:12.7px!important;
    line-height:1.46!important;
  }

  .api-nav{
    top:54px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }

  .api-prev{left:4px!important;}
  .api-next{right:4px!important;}
}

@media(max-width:380px){
  .category-slider-shell{
    padding:0 30px!important;
  }

  .category-auto-track .category-card{
    flex-basis:calc(100vw - 84px)!important;
    min-width:calc(100vw - 84px)!important;
    max-width:calc(100vw - 84px)!important;
  }

  .api-card{
    width:calc(100vw - 92px)!important;
    max-width:272px!important;
  }

  .api-prev{left:2px!important;}
  .api-next{right:2px!important;}
}

/* =========================================================
   CLAYRAS FINAL MOBILE FIX - HOME API PORTFOLIO + THERAPEUTIC SLIDER
   Content and functionality unchanged
========================================================= */

@media (max-width: 760px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  main,
  .section,
  .container{
    max-width:100%!important;
    overflow-x:hidden;
  }

  .container{
    width:min(100% - 30px, 1180px)!important;
  }

  .section-title{
    max-width:100%!important;
    margin-bottom:30px!important;
  }

  .section-title h2{
    font-size:clamp(28px, 8vw, 38px)!important;
    line-height:1.12!important;
    letter-spacing:-.9px!important;
    margin-bottom:16px!important;
  }

  .section-title p{
    max-width:94%!important;
    font-size:15px!important;
    line-height:1.7!important;
  }

  /* Therapeutic Coverage Slider */
  .category-slider-shell{
    width:100%!important;
    max-width:100%!important;
    padding:0 38px!important;
    margin:0 auto!important;
    overflow:hidden!important;
    position:relative!important;
  }

  .category-auto-slider{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    border-radius:24px!important;
    touch-action:pan-y!important;
  }

  .category-auto-track{
    display:flex!important;
    align-items:stretch!important;
    gap:16px!important;
    width:max-content!important;
    will-change:transform!important;
  }

  .category-auto-track .category-card{
    flex:0 0 calc(100vw - 106px)!important;
    min-width:calc(100vw - 106px)!important;
    max-width:calc(100vw - 106px)!important;
    height:365px!important;
    border-radius:24px!important;
    overflow:hidden!important;
    background:#ffffff!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0!important;
    box-shadow:0 16px 44px rgba(15,23,42,.10)!important;
  }

  .category-auto-track .category-image{
    width:100%!important;
    height:132px!important;
    min-height:132px!important;
    flex:0 0 132px!important;
    background-size:cover!important;
    background-position:center!important;
  }

  .category-auto-track .category-card-body{
    flex:1!important;
    padding:38px 18px 20px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }

  .category-auto-track .category-card .icon{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    margin-top:-64px!important;
    margin-bottom:12px!important;
    position:relative!important;
    z-index:2!important;
  }

  .category-auto-track .category-card-body h3{
    font-size:18px!important;
    line-height:1.22!important;
    min-height:auto!important;
    margin:0 0 8px!important;
    letter-spacing:-.25px!important;
  }

  .category-auto-track .category-card-body p{
    font-size:13.5px!important;
    line-height:1.55!important;
    margin:0!important;
  }

  .category-slider-btn{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:50%!important;
    z-index:20!important;
    background:#ffffff!important;
    color:#5E57FD!important;
    border:1px solid rgba(94,87,253,.18)!important;
    box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
  }

  .category-slider-prev{left:0!important;}
  .category-slider-next{right:0!important;}

  /* API Portfolio Carousel - mobile single card */
  .api-carousel-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    position:relative!important;
  }

  .api-carousel{
    flex:0 1 300px!important;
    width:300px!important;
    max-width:calc(100vw - 96px)!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
    perspective:none!important;
    touch-action:pan-y!important;
  }

  .api-carousel .api-slide{
    display:none!important;
    position:static!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    pointer-events:none!important;
    z-index:auto!important;
  }

  .api-carousel .api-slide.is-active{
    display:block!important;
    position:static!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    pointer-events:auto!important;
  }

  .api-carousel .api-slide.is-prev,
  .api-carousel .api-slide.is-next,
  .api-carousel .api-slide.is-far-prev,
  .api-carousel .api-slide.is-far-next{
    display:none!important;
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    pointer-events:none!important;
  }

  .api-carousel .api-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:#ffffff!important;
    box-shadow:0 16px 44px rgba(15,23,42,.12)!important;
  }

  .api-carousel .api-image,
  .api-carousel .api-slide.is-active .api-image{
    width:100%!important;
    height:128px!important;
    min-height:128px!important;
    max-height:128px!important;
    background-size:cover!important;
    background-position:center!important;
  }

  .api-carousel .api-body,
  .api-carousel .api-slide:not(.is-active) .api-body{
    padding:18px 18px 20px!important;
  }

  .api-carousel .api-tag{
    padding:6px 12px!important;
    font-size:11.5px!important;
    line-height:1.1!important;
    margin-bottom:10px!important;
  }

  .api-carousel .api-body h3,
  .api-carousel .api-slide.is-active .api-body h3{
    font-size:20px!important;
    line-height:1.18!important;
    letter-spacing:-.3px!important;
    margin:0 0 9px!important;
  }

  .api-carousel .api-body p{
    font-size:13.5px!important;
    line-height:1.55!important;
    margin:0 0 14px!important;
  }

  .api-carousel .api-link{
    font-size:13.5px!important;
    line-height:1.2!important;
  }

  .api-nav{
    position:static!important;
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    border-radius:50%!important;
    transform:none!important;
    z-index:20!important;
    background:#ffffff!important;
    color:#5E57FD!important;
    border:1px solid rgba(94,87,253,.18)!important;
    box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
  }

  .api-dots{
    margin-top:18px!important;
    display:flex!important;
    justify-content:center!important;
    gap:8px!important;
  }

  .api-dot{
    width:8px!important;
    height:8px!important;
  }

  .api-dot.is-active{
    width:24px!important;
  }

  .api-note{
    margin-top:26px!important;
    margin-bottom:78px!important;
    padding:22px 18px!important;
    border-radius:22px!important;
  }

  .api-note strong{
    font-size:22px!important;
    line-height:1.22!important;
  }

  .api-note p{
    font-size:14.2px!important;
    line-height:1.65!important;
  }

  .api-note .btn{
    width:100%!important;
    justify-content:center!important;
  }

  .whatsapp{
    width:54px!important;
    height:54px!important;
    right:18px!important;
    bottom:18px!important;
  }

  .whatsapp i{
    font-size:27px!important;
  }
}

@media (max-width: 430px){
  .container{
    width:min(100% - 28px, 1180px)!important;
  }

  .section-title h2{
    font-size:clamp(26px, 7.5vw, 34px)!important;
  }

  .category-slider-shell{
    padding:0 34px!important;
  }

  .category-auto-track .category-card{
    flex-basis:calc(100vw - 96px)!important;
    min-width:calc(100vw - 96px)!important;
    max-width:calc(100vw - 96px)!important;
    height:350px!important;
  }

  .category-auto-track .category-image{
    height:122px!important;
    min-height:122px!important;
    flex-basis:122px!important;
  }

  .category-auto-track .category-card-body{
    padding:34px 16px 18px!important;
  }

  .category-auto-track .category-card-body h3{
    font-size:17px!important;
  }

  .category-auto-track .category-card-body p{
    font-size:13.1px!important;
  }

  .api-carousel{
    flex-basis:286px!important;
    width:286px!important;
    max-width:calc(100vw - 88px)!important;
  }

  .api-carousel .api-image,
  .api-carousel .api-slide.is-active .api-image{
    height:122px!important;
    min-height:122px!important;
    max-height:122px!important;
  }

  .api-carousel .api-body,
  .api-carousel .api-slide:not(.is-active) .api-body{
    padding:17px 17px 19px!important;
  }

  .api-carousel .api-body h3,
  .api-carousel .api-slide.is-active .api-body h3{
    font-size:19px!important;
  }

  .api-carousel .api-body p{
    font-size:13.2px!important;
  }

  .api-nav{
    flex-basis:32px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    max-width:32px!important;
  }
}
.inquiry-message-fade{
  opacity:.35;
  transition:opacity .35s ease;
}

.inquiry-inline-message{
  grid-column:1/-1;
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.55;
  font-weight:700;
  margin:0 0 6px;
}

.inquiry-inline-message strong{
  display:block;
  margin-bottom:3px;
  font-size:14.5px;
  line-height:1.35;
}

.inquiry-inline-message span{
  display:block;
  font-size:13.5px;
  line-height:1.5;
}

.inquiry-inline-message.success{
  background:#dcfce7;
  color:#166534;
  border:1px solid #bbf7d0;
}

.inquiry-inline-message.error{
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fecaca;
}

.form-captcha-row{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 170px;
  gap:14px;
  align-items:center;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}

.form-captcha-row label{
  color:#ffffff;
  font-size:13.5px;
  line-height:1.4;
  font-weight:800;
}

.form-captcha-row input{
  width:100%;
}

.website-field{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:700px){
  .form-captcha-row{
    grid-template-columns:1fr;
    gap:10px;
  }
}

.form-privacy-note{
  grid-column:1/-1;
  color:rgba(255,255,255,.78);
  font-size:12.5px;
  line-height:1.6;
  font-weight:600;
  margin-top:2px;
}

.form-privacy-note a{
  color:#ffffff;
  font-weight:800;
  text-decoration:underline;
}

.contact-form-panel .form-privacy-note,
.contact-form-grid .form-privacy-note{
  color:#64748b;
}

.contact-form-panel .form-privacy-note a,
.contact-form-grid .form-privacy-note a{
  color:#5E57FD;
}
.copyright{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.footer-legal-links a{
  color:inherit;
  font-size:13px;
  font-weight:700;
  opacity:.82;
}

.footer-legal-links a:hover{
  color:var(--primary);
  opacity:1;
}

@media(max-width:700px){
  .copyright{
    justify-content:center;
    text-align:center;
  }

  .footer-legal-links{
    justify-content:center;
  }
}

/* =========================================================
   CLAYRAS FINAL SAFE FIXES
   Purpose: protect existing appearance/functionality while
   fixing logo visibility, footer legal links, and form notes.
========================================================= */

/* Header + Footer logo visibility guard */
.logo,
.logo:link,
.logo:visited,
.footer-logo,
.footer-logo:link,
.footer-logo:visited,
.footer-logo-link,
.footer-logo-link:link,
.footer-logo-link:visited{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-shrink:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  line-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
}

.logo img,
.site-header .logo img,
.footer-logo img,
.footer-logo-img,
.footer-logo-link img{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  width:auto!important;
  height:46px!important;
  max-width:180px!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
}

.footer-logo img,
.footer-logo-img,
.footer-logo-link img{
  height:44px!important;
  max-height:44px!important;
  margin-bottom:16px!important;
  filter:brightness(0) invert(1)!important;
}

/* Prevent generic footer link hover from moving logo */
.footer-logo:hover,
.footer-logo-link:hover{
  transform:none!important;
}

/* Footer legal links alignment */
.copyright{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  text-align:left;
}

.footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.footer-legal-links a{
  display:inline-flex;
  align-items:center;
  width:auto;
  margin-bottom:0;
  color:inherit;
  font-size:13px;
  font-weight:700;
  opacity:.82;
}

.footer-legal-links a:hover{
  color:#ffffff;
  opacity:1;
  transform:none;
}

/* Privacy note for dark inquiry boxes and light contact forms */
.form-privacy-note{
  grid-column:1/-1;
  color:rgba(255,255,255,.78);
  font-size:12.5px;
  line-height:1.6;
  font-weight:600;
  margin-top:2px;
}

.form-privacy-note a{
  color:#ffffff;
  font-weight:800;
  text-decoration:underline;
}

.contact-form-panel .form-privacy-note,
.contact-form-grid .form-privacy-note{
  color:#64748b;
}

.contact-form-panel .form-privacy-note a,
.contact-form-grid .form-privacy-note a{
  color:#5E57FD;
}

/* Inquiry form message/captcha safety */
.inquiry-inline-message{
  grid-column:1/-1;
  width:100%;
}

.form-captcha-row{
  grid-column:1/-1;
}

.website-field{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:760px){
  .logo img,
  .site-header .logo img,
  .footer-logo img,
  .footer-logo-img,
  .footer-logo-link img{
    height:32px!important;
    max-height:32px!important;
    max-width:140px!important;
  }

  .copyright{
    justify-content:center;
    text-align:center;
  }

  .footer-legal-links{
    justify-content:center;
  }
}

@media(max-width:760px){
  #moleculeCanvas,
  .page-molecule-canvas{
    display:none!important;
  }

  .animate-up,
  .delay-1,
  .delay-2,
  .delay-3{
    animation:none!important;
  }

  .route,
  .presence-route-line,
  .presence-route-pulse,
  .presence-map-dot::before,
  .whatsapp{
    animation:none!important;
  }
}
@media(max-width:760px){
  .hero{
    background:
      radial-gradient(circle at 90% 15%,rgba(0,166,200,.08),transparent 30%),
      linear-gradient(110deg,#f8fbff 0%,#f8fbff 58%,#f1f0ff 100%);
  }

  .page-hero{
    background:
      linear-gradient(180deg,rgba(248,251,255,.97) 0%,rgba(248,251,255,.90) 58%,rgba(248,251,255,.80) 100%),
      linear-gradient(135deg,rgba(94,87,253,.08),rgba(0,166,200,.06)),
      url("/assets/img/hero-mobile.webp") center/cover no-repeat!important;
  }
}
@media(max-width:760px){
  .hero{
    min-height:620px;
    display:flex;
    align-items:center;
  }

  .hero-grid{
    min-height:420px;
  }

  .hero-rotate-wrap{
    min-height:150px!important;
  }

  #heroRotate{
    min-height:70px!important;
    display:block;
  }
}
.logo img{
  width:180px!important;
  height:46px!important;
  object-fit:contain!important;
}

@media(max-width:760px){
  .logo img{
    width:140px!important;
    height:32px!important;
    object-fit:contain!important;
  }
}

/* =========================================================
   CLS + Mobile Stability Fix
   Purpose: reserve stable space for logo, hero rotating text,
   mobile hero and WhatsApp button without changing site content.
   ========================================================= */
.logo{
  width:180px;
  height:46px;
  display:flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}

.logo img,
.site-header .logo img{
  width:180px!important;
  height:46px!important;
  max-width:180px!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
}

.hero-audience{
  min-height:42px;
}

.hero-audience span{
  min-height:18px;
}

.hero-rotate-wrap{
  min-height:150px!important;
}

#heroRotate{
  min-height:70px!important;
  display:block;
}

@media(max-width:760px){
  .navbar{
    height:74px;
  }

  .logo{
    width:140px;
    height:32px;
  }

  .logo img,
  .site-header .logo img{
    width:140px!important;
    height:32px!important;
    max-width:140px!important;
    max-height:32px!important;
    object-fit:contain!important;
  }

  .hero{
    min-height:620px;
    display:flex;
    align-items:center;
    padding:64px 0 56px;
  }

  .hero-grid{
    min-height:420px;
  }

  .hero-audience{
    min-height:52px;
  }

  .hero-audience span{
    min-height:18px;
  }

  .hero-rotate-wrap{
    min-height:150px!important;
  }

  #heroRotate{
    min-height:72px!important;
    display:block;
  }

  .whatsapp{
    width:54px!important;
    height:54px!important;
    right:16px!important;
    bottom:16px!important;
    animation:none!important;
  }
}

/* =========================================================
   CLAYRAS SIMPLE INNER PAGE HERO - FINAL
   Large page title + small breadcrumb, no image
   ========================================================= */

.page-hero,
.simple-page-hero{
  border:0 !important;
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:300px !important;
  padding:86px 0 76px !important;
  display:flex !important;
  align-items:center !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(0,166,200,.14), transparent 30%),
    radial-gradient(circle at 12% 78%, rgba(94,87,253,.14), transparent 34%),
    linear-gradient(135deg,#f8fbff 0%,#eef0ff 50%,#e8f8fc 100%) !important;
}

.page-hero::before,
.simple-page-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:1 !important;
  opacity:.34 !important;
  background-image:
    radial-gradient(circle, rgba(94,87,253,.16) 2px, transparent 2.7px),
    linear-gradient(120deg, rgba(94,87,253,.035) 1px, transparent 1px),
    linear-gradient(30deg, rgba(0,166,200,.026) 1px, transparent 1px) !important;
  background-size:74px 74px,120px 120px,110px 110px !important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%) !important;
}

.page-hero::after,
.simple-page-hero::after{
  content:"" !important;
  position:absolute !important;
  right:-180px !important;
  top:-180px !important;
  width:520px !important;
  height:520px !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:
    radial-gradient(circle, rgba(94,87,253,.16) 0%, rgba(94,87,253,.07) 38%, transparent 72%),
    radial-gradient(circle at 70% 70%, rgba(0,166,200,.15), transparent 58%) !important;
  opacity:.82 !important;
}

.page-hero > .container,
.simple-page-hero > .container,
.page-hero .page-hero-grid,
.simple-page-hero .page-hero-grid{
  position:relative !important;
  z-index:5 !important;
}

.page-hero .page-hero-grid,
.simple-page-hero .page-hero-grid{
  min-height:auto !important;
  display:block !important;
}

.simple-hero-content{
  max-width:900px !important;
}

.page-hero h1,
.simple-page-hero h1{
  color:#0f172a !important;
  font-size:clamp(54px,6vw,86px) !important;
  line-height:1.02 !important;
  letter-spacing:-2.8px !important;
  margin:0 0 20px !important;
  font-weight:800 !important;
  max-width:900px !important;
  text-shadow:none !important;
}

.page-hero h1 span,
.simple-page-hero h1 span{
  color:inherit !important;
}

.page-hero .breadcrumb,
.simple-page-hero .breadcrumb,
.simple-breadcrumb{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  color:#64748b !important;
  font-size:13.5px !important;
  line-height:1 !important;
  font-weight:800 !important;
  margin:0 !important;
  letter-spacing:.04em !important;
}

.page-hero .breadcrumb a,
.simple-page-hero .breadcrumb a,
.simple-breadcrumb a{
  color:#5E57FD !important;
}

.page-hero p,
.page-hero .eyebrow,
.page-hero .hero-actions,
.page-hero .about-visual,
.page-hero .capability-visual,
.page-hero .product-visual,
.page-hero .blog-visual,
.page-hero .faq-visual,
.page-hero .contact-visual{
  display:none !important;
}

.page-hero-grid > div:first-child::after{
  content:"" !important;
  display:block !important;
  width:104px !important;
  height:4px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#5E57FD,#00a6c8) !important;
  margin-top:26px !important;
}

@media(max-width:760px){
  .page-hero,
  .simple-page-hero{
    min-height:240px !important;
    padding:64px 0 56px !important;
  }

  .page-hero h1,
  .simple-page-hero h1{
    font-size:clamp(42px,12vw,58px) !important;
    letter-spacing:-1.6px !important;
    margin-bottom:16px !important;
  }

  .page-hero .breadcrumb,
  .simple-page-hero .breadcrumb,
  .simple-breadcrumb{
    font-size:12.5px !important;
    flex-wrap:wrap !important;
  }

  .page-hero::after,
  .simple-page-hero::after{
    right:-260px !important;
    top:-210px !important;
    width:460px !important;
    height:460px !important;
  }
}

/* =========================================================
   CLAYRAS SIMPLE INNER PAGE HERO - COMPACT HEIGHT FINAL
   Paste at very bottom of style.css
   ========================================================= */

.page-hero,
.simple-page-hero{
  min-height:185px !important;
  padding:48px 0 42px !important;
}

.page-hero .page-hero-grid,
.simple-page-hero .page-hero-grid{
  min-height:auto !important;
}

.page-hero h1,
.simple-page-hero h1{
  font-size:clamp(42px,4.6vw,64px) !important;
  line-height:1.05 !important;
  letter-spacing:-2px !important;
  margin:0 0 14px !important;
}

.page-hero .breadcrumb,
.simple-page-hero .breadcrumb,
.simple-breadcrumb{
  font-size:12.5px !important;
  margin:0 !important;
}

.page-hero-grid > div:first-child::after{
  width:86px !important;
  height:3px !important;
  margin-top:18px !important;
}

@media(max-width:760px){
  .page-hero,
  .simple-page-hero{
    min-height:150px !important;
    padding:42px 0 36px !important;
  }

  .page-hero h1,
  .simple-page-hero h1{
    font-size:clamp(34px,10vw,44px) !important;
    letter-spacing:-1.2px !important;
    margin-bottom:12px !important;
  }

  .page-hero .breadcrumb,
  .simple-page-hero .breadcrumb,
  .simple-breadcrumb{
    font-size:12px !important;
  }

  .page-hero-grid > div:first-child::after{
    width:72px !important;
    height:3px !important;
    margin-top:16px !important;
  }
}

/* =========================================================
   CLAYRAS ABOUT PAGE - GLOBAL PROFESSIONAL LAYOUT FIX
   Paste at very bottom of style.css
   ========================================================= */

/* About page company overview balance */
#company-overview{
  padding-top:82px !important;
  padding-bottom:94px !important;
  background:#ffffff !important;
}

#company-overview .about-grid{
  width:min(1180px,92%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(430px,0.92fr) minmax(520px,1.08fr) !important;
  gap:76px !important;
  align-items:center !important;
}

#company-overview .about-image{
  width:100% !important;
  min-height:520px !important;
  border-radius:34px !important;
  background:
    linear-gradient(135deg,rgba(94,87,253,.28),rgba(0,166,200,.18)),
    url("/assets/img/api-documentation.webp") center/cover no-repeat !important;
  box-shadow:0 34px 95px rgba(15,23,42,.14) !important;
  border:1px solid rgba(94,87,253,.16) !important;
}

#company-overview .content-block{
  max-width:650px !important;
  width:100% !important;
}

#company-overview .content-block h2{
  font-size:clamp(38px,3.7vw,54px) !important;
  line-height:1.07 !important;
  letter-spacing:-1.8px !important;
  margin-bottom:24px !important;
  max-width:650px !important;
}

#company-overview .content-block p{
  font-size:17px !important;
  line-height:1.84 !important;
  margin-bottom:17px !important;
  color:#64748b !important;
}

#company-overview .content-points{
  margin-top:28px !important;
  gap:12px !important;
}

#company-overview .content-points li{
  font-size:15.5px !important;
  line-height:1.52 !important;
  font-weight:750 !important;
}

/* Bigger section labels on About page */
#company-overview .eyebrow,
#mission-vision .eyebrow,
#our-role .eyebrow,
#values .eyebrow,
#buyer-segments .eyebrow{
  font-size:14px !important;
  letter-spacing:.145em !important;
  margin-bottom:18px !important;
}

/* Mission & Vision typography + card balance */
#mission-vision{
  padding-top:92px !important;
  padding-bottom:100px !important;
}

#mission-vision .section-title{
  max-width:980px !important;
  margin-bottom:52px !important;
}

#mission-vision .section-title h2{
  font-size:clamp(40px,4vw,58px) !important;
  line-height:1.07 !important;
  letter-spacing:-1.8px !important;
  margin-bottom:20px !important;
}

#mission-vision .section-title p{
  max-width:800px !important;
  font-size:17px !important;
  line-height:1.8 !important;
}

#mission-vision .about-mv-wrap{
  max-width:1120px !important;
}

#mission-vision .about-mv-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:30px !important;
}

#mission-vision .about-mv-card{
  min-height:430px !important;
  padding:40px 38px !important;
  border-radius:30px !important;
}

#mission-vision .about-mv-card h3{
  font-size:29px !important;
  line-height:1.19 !important;
  letter-spacing:-.85px !important;
  margin-bottom:17px !important;
}

#mission-vision .about-mv-card p{
  font-size:16px !important;
  line-height:1.78 !important;
}

#mission-vision .about-mv-label{
  font-size:13px !important;
  letter-spacing:.11em !important;
  padding:9px 15px !important;
}

/* Card sections spacing */
#our-role,
#values,
#buyer-segments{
  padding-top:88px !important;
  padding-bottom:88px !important;
}

#our-role .section-title,
#values .section-title,
#buyer-segments .section-title{
  max-width:940px !important;
  margin-bottom:48px !important;
}

#our-role .section-title h2,
#values .section-title h2,
#buyer-segments .section-title h2{
  font-size:clamp(38px,3.6vw,54px) !important;
  line-height:1.08 !important;
  letter-spacing:-1.6px !important;
}

#our-role .cards-grid,
#values .cards-grid,
#buyer-segments .cards-grid{
  width:min(1180px,92%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:24px !important;
}

#our-role .card,
#values .card,
#buyer-segments .card{
  padding:30px 28px !important;
  border-radius:22px !important;
}

/* Large-screen correction */
@media(max-width:1180px){
  #company-overview .about-grid{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  #company-overview .about-image{
    max-width:760px !important;
    min-height:430px !important;
    margin:0 auto !important;
  }

  #company-overview .content-block{
    max-width:820px !important;
    margin:0 auto !important;
  }
}

@media(max-width:900px){
  #mission-vision .about-mv-grid{
    grid-template-columns:1fr !important;
  }

  #mission-vision .about-mv-card{
    min-height:auto !important;
  }
}

@media(max-width:760px){
  #company-overview,
  #mission-vision,
  #our-role,
  #values,
  #buyer-segments{
    padding-top:62px !important;
    padding-bottom:66px !important;
  }

  #company-overview .about-grid{
    gap:30px !important;
  }

  #company-overview .about-image{
    min-height:300px !important;
    border-radius:24px !important;
  }

  #company-overview .content-block h2,
  #mission-vision .section-title h2,
  #our-role .section-title h2,
  #values .section-title h2,
  #buyer-segments .section-title h2{
    font-size:32px !important;
    line-height:1.14 !important;
    letter-spacing:-1px !important;
  }

  #company-overview .eyebrow,
  #mission-vision .eyebrow,
  #our-role .eyebrow,
  #values .eyebrow,
  #buyer-segments .eyebrow{
    font-size:12.5px !important;
  }

  #mission-vision .about-mv-card{
    padding:28px 24px !important;
    border-radius:22px !important;
  }

  #mission-vision .about-mv-card h3{
    font-size:23px !important;
    line-height:1.26 !important;
  }
}

/* =========================================================
   CLAYRAS ABOUT PAGE - STRUCTURE BASED FORCE FIX
   This does not depend only on section IDs.
   ========================================================= */

/* ABOUT: 1st content section after hero = Company Overview */
body:has(.simple-page-hero) main > section:nth-of-type(2),
body:has(.page-hero) main > section:nth-of-type(2){
  padding-top:72px !important;
  padding-bottom:86px !important;
  background:#ffffff !important;
}

/* Force Company Overview grid balance */
body:has(.simple-page-hero) main > section:nth-of-type(2) .about-grid,
body:has(.page-hero) main > section:nth-of-type(2) .about-grid,
main > section:nth-of-type(2) .about-grid{
  width:min(1180px,92%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(440px,0.95fr) minmax(560px,1.05fr) !important;
  gap:80px !important;
  align-items:center !important;
}

/* Force visual image block */
main > section:nth-of-type(2) .about-image,
main > section:nth-of-type(2) .split-visual{
  display:block !important;
  width:100% !important;
  min-height:520px !important;
  border-radius:34px !important;
  background:
    linear-gradient(135deg,rgba(94,87,253,.24),rgba(0,166,200,.18)),
    url("/assets/img/api-documentation.webp") center/cover no-repeat !important;
  box-shadow:0 34px 95px rgba(15,23,42,.14) !important;
  border:1px solid rgba(94,87,253,.16) !important;
}

/* Force content column */
main > section:nth-of-type(2) .content-block,
main > section:nth-of-type(2) .intro-label{
  max-width:680px !important;
  width:100% !important;
}

/* Company overview headline */
main > section:nth-of-type(2) .content-block h2,
main > section:nth-of-type(2) .intro-label h2{
  font-size:clamp(40px,3.9vw,56px) !important;
  line-height:1.06 !important;
  letter-spacing:-1.9px !important;
  margin-bottom:24px !important;
  max-width:680px !important;
}

/* Company overview paragraph */
main > section:nth-of-type(2) .content-block p,
main > section:nth-of-type(2) .intro-label p{
  font-size:17px !important;
  line-height:1.84 !important;
  margin-bottom:17px !important;
  color:#64748b !important;
}

/* Bigger small labels */
main > section:nth-of-type(2) .eyebrow,
main > section:nth-of-type(3) .eyebrow,
main > section:nth-of-type(4) .eyebrow,
main > section:nth-of-type(5) .eyebrow,
main > section:nth-of-type(6) .eyebrow{
  font-size:14px !important;
  letter-spacing:.145em !important;
  margin-bottom:18px !important;
}

/* Mission & Vision = section 3 */
main > section:nth-of-type(3){
  padding-top:84px !important;
  padding-bottom:96px !important;
}

main > section:nth-of-type(3) .section-title{
  max-width:980px !important;
  margin-bottom:52px !important;
}

main > section:nth-of-type(3) .section-title h2{
  font-size:clamp(40px,4vw,58px) !important;
  line-height:1.07 !important;
  letter-spacing:-1.8px !important;
  margin-bottom:20px !important;
}

main > section:nth-of-type(3) .section-title p{
  max-width:800px !important;
  font-size:17px !important;
  line-height:1.8 !important;
}

main > section:nth-of-type(3) .about-mv-wrap{
  max-width:1120px !important;
}

main > section:nth-of-type(3) .about-mv-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:30px !important;
}

main > section:nth-of-type(3) .about-mv-card{
  min-height:430px !important;
  padding:40px 38px !important;
  border-radius:30px !important;
}

main > section:nth-of-type(3) .about-mv-card h3{
  font-size:29px !important;
  line-height:1.19 !important;
  letter-spacing:-.85px !important;
  margin-bottom:17px !important;
}

main > section:nth-of-type(3) .about-mv-label{
  font-size:13px !important;
  letter-spacing:.11em !important;
  padding:9px 15px !important;
}

/* Card sections after Mission/Vision */
main > section:nth-of-type(4),
main > section:nth-of-type(5),
main > section:nth-of-type(6){
  padding-top:82px !important;
  padding-bottom:82px !important;
}

main > section:nth-of-type(4) .section-title,
main > section:nth-of-type(5) .section-title,
main > section:nth-of-type(6) .section-title{
  max-width:940px !important;
  margin-bottom:48px !important;
}

main > section:nth-of-type(4) .section-title h2,
main > section:nth-of-type(5) .section-title h2,
main > section:nth-of-type(6) .section-title h2{
  font-size:clamp(38px,3.6vw,54px) !important;
  line-height:1.08 !important;
  letter-spacing:-1.6px !important;
}

main > section:nth-of-type(4) .cards-grid,
main > section:nth-of-type(5) .cards-grid,
main > section:nth-of-type(6) .cards-grid{
  width:min(1180px,92%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:24px !important;
}

main > section:nth-of-type(4) .card,
main > section:nth-of-type(5) .card,
main > section:nth-of-type(6) .card{
  padding:30px 28px !important;
  border-radius:22px !important;
}

/* Desktop/tablet fallback */
@media(max-width:1180px){
  main > section:nth-of-type(2) .about-grid{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  main > section:nth-of-type(2) .about-image,
  main > section:nth-of-type(2) .split-visual{
    max-width:760px !important;
    min-height:430px !important;
    margin:0 auto !important;
  }

  main > section:nth-of-type(2) .content-block,
  main > section:nth-of-type(2) .intro-label{
    max-width:820px !important;
    margin:0 auto !important;
  }
}

@media(max-width:900px){
  main > section:nth-of-type(3) .about-mv-grid{
    grid-template-columns:1fr !important;
  }

  main > section:nth-of-type(3) .about-mv-card{
    min-height:auto !important;
  }
}

@media(max-width:760px){
  main > section:nth-of-type(2),
  main > section:nth-of-type(3),
  main > section:nth-of-type(4),
  main > section:nth-of-type(5),
  main > section:nth-of-type(6){
    padding-top:62px !important;
    padding-bottom:66px !important;
  }

  main > section:nth-of-type(2) .about-grid{
    gap:30px !important;
  }

  main > section:nth-of-type(2) .about-image,
  main > section:nth-of-type(2) .split-visual{
    min-height:300px !important;
    border-radius:24px !important;
  }

  main > section:nth-of-type(2) .content-block h2,
  main > section:nth-of-type(2) .intro-label h2,
  main > section:nth-of-type(3) .section-title h2,
  main > section:nth-of-type(4) .section-title h2,
  main > section:nth-of-type(5) .section-title h2,
  main > section:nth-of-type(6) .section-title h2{
    font-size:32px !important;
    line-height:1.14 !important;
    letter-spacing:-1px !important;
  }

  main > section:nth-of-type(2) .eyebrow,
  main > section:nth-of-type(3) .eyebrow,
  main > section:nth-of-type(4) .eyebrow,
  main > section:nth-of-type(5) .eyebrow,
  main > section:nth-of-type(6) .eyebrow{
    font-size:12.5px !important;
  }

  main > section:nth-of-type(3) .about-mv-card{
    padding:28px 24px !important;
    border-radius:22px !important;
  }

  main > section:nth-of-type(3) .about-mv-card h3{
    font-size:23px !important;
    line-height:1.26 !important;
  }
}

/* =========================================================
   CLAYRAS ABOUT - COMPANY OVERVIEW BALANCED V2
   Compact premium layout for section below hero
   ========================================================= */

#company-overview,
main > section:nth-of-type(2){
  padding-top:74px !important;
  padding-bottom:82px !important;
  background:#ffffff !important;
}

#company-overview .about-grid,
main > section:nth-of-type(2) .about-grid{
  width:min(1120px,92%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(360px,.86fr) minmax(520px,1.14fr) !important;
  gap:68px !important;
  align-items:start !important;
}

/* Make left visual look like a professional abstract card, not a blank image box */
#company-overview .about-image,
main > section:nth-of-type(2) .about-image,
main > section:nth-of-type(2) .split-visual{
  display:block !important;
  min-height:360px !important;
  height:360px !important;
  margin-top:72px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  position:relative !important;
  background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.70), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(94,87,253,.18), transparent 26%),
    radial-gradient(circle at 82% 82%, rgba(0,166,200,.16), transparent 30%),
    linear-gradient(135deg,#eef0ff 0%,#dfe8ff 52%,#d9f5fb 100%) !important;
  box-shadow:0 26px 70px rgba(15,23,42,.10) !important;
  border:1px solid rgba(94,87,253,.16) !important;
}

/* Decorative pharma-style inner pattern */
#company-overview .about-image::before,
main > section:nth-of-type(2) .about-image::before,
main > section:nth-of-type(2) .split-visual::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image:
    radial-gradient(circle, rgba(94,87,253,.18) 2px, transparent 2.8px),
    linear-gradient(120deg, rgba(94,87,253,.040) 1px, transparent 1px) !important;
  background-size:64px 64px,110px 110px !important;
  opacity:.42 !important;
  filter:none !important;
}

#company-overview .about-image::after,
main > section:nth-of-type(2) .about-image::after,
main > section:nth-of-type(2) .split-visual::after{
  content:"" !important;
  position:absolute !important;
  right:-70px !important;
  bottom:-80px !important;
  width:220px !important;
  height:220px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,rgba(94,87,253,.20),rgba(0,166,200,.16)) !important;
  opacity:1 !important;
}

/* Content column readable balance */
#company-overview .content-block,
main > section:nth-of-type(2) .content-block,
main > section:nth-of-type(2) .intro-label{
  max-width:620px !important;
  width:100% !important;
  padding-top:0 !important;
}

#company-overview .eyebrow,
main > section:nth-of-type(2) .eyebrow{
  font-size:13.5px !important;
  letter-spacing:.16em !important;
  margin-bottom:18px !important;
}

#company-overview .content-block h2,
main > section:nth-of-type(2) .content-block h2,
main > section:nth-of-type(2) .intro-label h2{
  font-size:clamp(34px,3.2vw,46px) !important;
  line-height:1.10 !important;
  letter-spacing:-1.35px !important;
  margin-bottom:22px !important;
  max-width:620px !important;
}

#company-overview .content-block p,
main > section:nth-of-type(2) .content-block p,
main > section:nth-of-type(2) .intro-label p{
  font-size:16.4px !important;
  line-height:1.76 !important;
  margin-bottom:15px !important;
  color:#64748b !important;
}

#company-overview .content-points,
main > section:nth-of-type(2) .content-points{
  margin-top:22px !important;
  gap:10px !important;
}

#company-overview .content-points li,
main > section:nth-of-type(2) .content-points li{
  font-size:14.8px !important;
  line-height:1.46 !important;
  font-weight:750 !important;
}

/* Keep section from feeling too stretched */
#company-overview .content-points li::before,
main > section:nth-of-type(2) .content-points li::before{
  width:20px !important;
  height:20px !important;
  font-size:11px !important;
}

@media(max-width:1180px){
  #company-overview .about-grid,
  main > section:nth-of-type(2) .about-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }

  #company-overview .about-image,
  main > section:nth-of-type(2) .about-image,
  main > section:nth-of-type(2) .split-visual{
    max-width:680px !important;
    height:320px !important;
    min-height:320px !important;
    margin:0 auto !important;
  }

  #company-overview .content-block,
  main > section:nth-of-type(2) .content-block,
  main > section:nth-of-type(2) .intro-label{
    max-width:780px !important;
    margin:0 auto !important;
  }
}

@media(max-width:760px){
  #company-overview,
  main > section:nth-of-type(2){
    padding-top:56px !important;
    padding-bottom:62px !important;
  }

  #company-overview .about-image,
  main > section:nth-of-type(2) .about-image,
  main > section:nth-of-type(2) .split-visual{
    height:240px !important;
    min-height:240px !important;
    border-radius:22px !important;
  }

  #company-overview .content-block h2,
  main > section:nth-of-type(2) .content-block h2,
  main > section:nth-of-type(2) .intro-label h2{
    font-size:30px !important;
    line-height:1.15 !important;
    letter-spacing:-.9px !important;
  }

  #company-overview .content-block p,
  main > section:nth-of-type(2) .content-block p,
  main > section:nth-of-type(2) .intro-label p{
    font-size:15.8px !important;
  }
}
/* =========================================================
   CLAYRAS HOME CATEGORY SLIDER CARD TEXT CUT FIX
   ========================================================= */

.category-carousel,
.category-slider,
.category-auto-wrap,
.category-auto-slider,
.api-category-slider,
.home-category-slider{
  overflow-y: visible !important;
}

.category-auto-track,
.category-track,
.api-category-track{
  align-items: stretch !important;
}

.category-auto-track .card,
.category-card,
.category-auto-card,
.api-category-card{
  height: auto !important;
  min-height: 430px !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

.category-card-img,
.category-auto-track .card img,
.category-auto-card img,
.api-category-card img{
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.category-card-body,
.category-auto-track .card .category-card-body,
.category-auto-card .category-card-body,
.api-category-card .category-card-body{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 28px 28px 30px !important;
  overflow: visible !important;
}

.category-card-body h3,
.category-auto-track .card h3,
.category-auto-card h3,
.api-category-card h3{
  min-height: auto !important;
  height: auto !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

.category-card-body p,
.category-auto-track .card p,
.category-auto-card p,
.api-category-card p{
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  color: #64748b !important;
  font-size: 15.2px !important;
  line-height: 1.68 !important;
  margin-bottom: 18px !important;
}

.category-card-body .api-link,
.category-auto-track .card .api-link,
.category-auto-card .api-link,
.api-category-card .api-link{
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* Slider side faded cards should not crop vertical content */
.category-auto-track > *,
.category-track > *,
.api-category-track > *{
  overflow: visible !important;
}

/* Mobile balanced height */
@media(max-width: 760px){
  .category-auto-track .card,
  .category-card,
  .category-auto-card,
  .api-category-card{
    min-height: 390px !important;
  }

  .category-card-img,
  .category-auto-track .card img,
  .category-auto-card img,
  .api-category-card img{
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }

  .category-card-body,
  .category-auto-track .card .category-card-body,
  .category-auto-card .category-card-body,
  .api-category-card .category-card-body{
    padding: 24px 22px 26px !important;
  }

  .category-card-body p,
  .category-auto-track .card p,
  .category-auto-card p,
  .api-category-card p{
    font-size: 14.8px !important;
    line-height: 1.62 !important;
  }
}

/* =========================================================
   CLAYRAS SAFE HERO CLS FIX
   No JS inline height locking
   ========================================================= */

body.page-home .hero{
  min-height:auto !important;
  contain:none !important;
}

body.page-home .hero-grid{
  min-height:auto !important;
}

.hero-rotate-wrap{
  min-height:150px !important;
  height:150px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.hero-rotate-wrap p{
  min-height:150px !important;
  margin-bottom:36px !important;
}

#heroRotate{
  display:block !important;
  min-height:68px !important;
  line-height:1.7 !important;
}

#heroRotate::after{
  height:1em !important;
}

/* Accessibility: keep API dots touch friendly without changing visual look */
.api-dot{
  min-width:44px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  position:relative !important;
}

.api-dot::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#cbd5e1;
  transition:.28s ease;
}

.api-dot.is-active::before{
  width:30px;
  background:var(--primary);
}

@media(max-width:760px){
  .hero-rotate-wrap{
    min-height:210px !important;
    height:210px !important;
  }

  .hero-rotate-wrap p{
    min-height:210px !important;
  }

  #heroRotate{
    min-height:96px !important;
  }
}

@media(max-width:480px){
  .hero-rotate-wrap{
    min-height:220px !important;
    height:220px !important;
  }

  .hero-rotate-wrap p{
    min-height:220px !important;
  }
}
/* =========================================================
   CLAYRAS BRAND SHAPE CLS FINAL FIX
   Fix PageSpeed CLS culprit: .brand-bg-shape.hero-brand-shape
   ========================================================= */

body.page-home .brand-bg-shape,
body.page-home .hero-brand-shape{
  position:absolute !important;
  right:-130px !important;
  bottom:-155px !important;
  width:520px !important;
  height:520px !important;
  min-width:520px !important;
  min-height:520px !important;
  max-width:520px !important;
  max-height:520px !important;
  aspect-ratio:1 / 1 !important;
  display:block !important;
  contain:layout paint !important;
  transform:rotate(-12deg) translateZ(0) !important;
  background:url("/assets/img/brand-mark.png") center/contain no-repeat !important;
  opacity:.026 !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* Mobile: hide decorative shape completely to remove CLS */
@media(max-width:760px){
  body.page-home .brand-bg-shape,
  body.page-home .hero-brand-shape{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    opacity:0 !important;
  }
}
/* =========================================================
   CLAYRAS HERO ROTATE CLS FINAL MOBILE FIX
   ========================================================= */

body.page-home .hero-rotate-wrap{
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.page-home .hero-rotate-wrap p{
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

body.page-home #heroRotate{
  display: block !important;
  min-height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
  line-height: 1.65 !important;
}

@media(max-width:760px){
  body.page-home .hero-rotate-wrap{
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  body.page-home .hero-rotate-wrap p{
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  body.page-home #heroRotate{
    min-height: 112px !important;
    max-height: 112px !important;
    line-height: 1.62 !important;
  }
}

@media(max-width:480px){
  body.page-home .hero-rotate-wrap{
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
  }

  body.page-home .hero-rotate-wrap p{
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
  }
}
/* =========================================================
   CLAYRAS MOBILE HERO FONT CLS FIX
   Reduces CLS caused by web font metric swap in hero
   ========================================================= */

@media(max-width:760px){
  body.page-home .hero,
  body.page-home .hero h1,
  body.page-home .hero p,
  body.page-home .hero span,
  body.page-home .hero a{
    font-family: Arial, Helvetica, sans-serif !important;
  }

  body.page-home .hero-rotate-wrap{
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    overflow: hidden !important;
    display: block !important;
  }

  body.page-home .hero-rotate-wrap p{
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  body.page-home #heroRotate{
    display: block !important;
    min-height: 112px !important;
    max-height: 112px !important;
    overflow: hidden !important;
    line-height: 1.62 !important;
  }

  body.page-home .hero h1{
    min-height: 168px !important;
    line-height: 1.08 !important;
  }
}

@media(max-width:480px){
  body.page-home .hero-rotate-wrap,
  body.page-home .hero-rotate-wrap p{
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
  }

  body.page-home .hero h1{
    min-height: 178px !important;
  }
}
/* =========================================================
   CLAYRAS DOWNLOADS MENU + DOWNLOAD MODAL
   ========================================================= */

.nav-downloads{
  position:relative;
  display:flex;
  align-items:center;
}

.nav-downloads-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:33px 0;
  border:0;
  background:transparent;
  color:#1e293b;
  font-size:15.2px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  letter-spacing:-.05px;
}

.nav-downloads-toggle::after{
  content:"";
  position:absolute;
  left:0;
  bottom:25px;
  width:0;
  height:2px;
  border-radius:10px;
  background:var(--primary);
  transition:.25s ease;
}

.nav-downloads-toggle:hover,
.nav-downloads.is-open .nav-downloads-toggle{
  color:var(--primary);
}

.nav-downloads-toggle:hover::after,
.nav-downloads.is-open .nav-downloads-toggle::after{
  width:100%;
}

.nav-downloads-toggle i{
  font-size:11px;
  line-height:1;
  transition:.22s ease;
}

.nav-downloads.is-open .nav-downloads-toggle i{
  transform:rotate(180deg);
}

.nav-downloads-menu{
  position:absolute;
  top:calc(100% - 8px);
  left:50%;
  min-width:220px;
  transform:translateX(-50%) translateY(12px);
  padding:10px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.14);
  box-shadow:0 22px 64px rgba(15,23,42,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.22s ease;
  z-index:120;
}

.nav-downloads.is-open .nav-downloads-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.download-open-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  background:#ffffff;
  color:#1e293b;
  padding:13px 14px;
  border-radius:13px;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  transition:.2s ease;
}

.download-open-btn::after{
  content:"→";
  color:var(--primary);
  font-weight:900;
  opacity:.75;
}

.download-open-btn:hover{
  background:rgba(94,87,253,.08);
  color:var(--primary);
}

/* Download Modal */
.download-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.24s ease;
}

.download-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.download-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(8px);
}

.download-modal-card{
  position:relative;
  z-index:2;
  width:min(540px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  border-radius:30px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.16);
  box-shadow:0 34px 100px rgba(15,23,42,.28);
  padding:34px;
  transform:translateY(18px) scale(.98);
  transition:.24s ease;
}

.download-modal.is-open .download-modal-card{
  transform:translateY(0) scale(1);
}

.download-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border:1px solid rgba(94,87,253,.14);
  border-radius:50%;
  background:#ffffff;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.22s ease;
}

.download-modal-close:hover{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
}

.download-modal-head{
  padding-right:34px;
  margin-bottom:24px;
}

.download-modal-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--primary);
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.download-modal-eyebrow::before{
  content:"";
  width:34px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}

.download-modal-head h2{
  color:#0f172a;
  font-size:30px;
  line-height:1.16;
  letter-spacing:-.8px;
  font-weight:800;
  margin-bottom:10px;
}

.download-modal-head p{
  color:#64748b;
  font-size:15px;
  line-height:1.7;
  margin:0;
}

.download-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.download-field{
  display:grid;
  gap:7px;
}

.download-field-full{
  grid-column:1 / -1;
}

.download-field label{
  color:#0f172a;
  font-size:13.5px;
  line-height:1.2;
  font-weight:800;
}

.download-field input{
  width:100%;
  height:50px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:0 15px;
  outline:0;
  color:#0f172a;
  font-size:14.5px;
  font-weight:600;
  background:#ffffff;
  transition:.2s ease;
}

.download-field input:focus{
  border-color:rgba(94,87,253,.48);
  box-shadow:0 0 0 4px rgba(94,87,253,.10);
}

.download-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.download-message{
  min-height:22px;
  margin:14px 0 12px;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
  font-weight:700;
}

.download-message.is-error{
  color:#dc2626;
}

.download-message.is-success{
  color:#16a34a;
}

.download-submit-btn{
  width:100%;
  min-height:52px;
}

.download-submit-btn.is-loading{
  opacity:.72;
  pointer-events:none;
}

body.download-modal-open{
  overflow:hidden;
}

@media(max-width:1180px){
  .nav-downloads{
    width:100%;
    display:block;
  }

  .nav-downloads-toggle{
    width:100%;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--border);
    font-size:15px;
    line-height:1.35;
  }

  .nav-downloads-toggle::after{
    display:none;
  }

  .nav-downloads-menu{
    position:static;
    min-width:100%;
    transform:none;
    box-shadow:none;
    border-radius:16px;
    margin:8px 0 12px;
    display:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    border-color:rgba(94,87,253,.12);
    background:#f8fbff;
  }

  .nav-downloads.is-open .nav-downloads-menu{
    display:grid;
    gap:6px;
    transform:none;
  }

  .download-open-btn{
    background:#ffffff;
  }
}

@media(max-width:620px){
  .download-modal{
    align-items:flex-end;
    padding:0;
  }

  .download-modal-card{
    width:100%;
    max-height:92vh;
    border-radius:28px 28px 0 0;
    padding:30px 22px 24px;
  }

  .download-modal-head{
    padding-right:38px;
  }

  .download-modal-head h2{
    font-size:25px;
  }

  .download-form-grid{
    grid-template-columns:1fr;
  }

  .download-field-full{
    grid-column:auto;
  }
}
/* =========================================================
   CLAYRAS DOWNLOAD MODAL COUNTRY CODE FIELD
   ========================================================= */

.download-phone-row{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:10px;
}

.download-phone-row select,
.download-phone-row input{
  width:100%;
  height:50px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:0 13px;
  outline:0;
  color:#0f172a;
  font-size:14.5px;
  font-weight:700;
  background:#ffffff;
  transition:.2s ease;
}

.download-phone-row select{
  cursor:pointer;
  appearance:auto;
}

.download-phone-row select:focus,
.download-phone-row input:focus{
  border-color:rgba(94,87,253,.48);
  box-shadow:0 0 0 4px rgba(94,87,253,.10);
}

@media(max-width:420px){
  .download-phone-row{
    grid-template-columns:86px 1fr;
    gap:8px;
  }

  .download-phone-row select,
  .download-phone-row input{
    font-size:14px;
    padding:0 11px;
  }
}

/* =========================================================
   CLAYRAS LIVE CHAT + WHATSAPP FLOATING ACTIONS
   Clean final version: desktop, mobile, and keyboard-safe layout
========================================================= */

.clayras-chat-widget{
  position:fixed;
  right:24px;
  bottom:96px;
  z-index:99990;
  font-family:inherit;
}

.clayras-chat-button{
  position:relative;
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(94,87,253,.32);
  transition:.25s ease;
}

.clayras-chat-button:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 58px rgba(94,87,253,.42);
}

.clayras-chat-button i{
  font-size:22px;
  line-height:1;
}

.clayras-chat-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#ef4444;
  color:#ffffff;
  font-size:12px;
  line-height:22px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(239,68,68,.36);
}

.clayras-chat-box{
  position:absolute;
  right:0;
  bottom:74px;
  width:390px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 130px);
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(94,87,253,.16);
  box-shadow:0 34px 100px rgba(15,23,42,.22);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(18px) scale(.98);
  transition:.24s ease;
  display:flex;
  flex-direction:column;
}

.clayras-chat-widget.is-open .clayras-chat-box{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.clayras-chat-start-form[hidden],
.clayras-chat-conversation[hidden]{
  display:none !important;
}

.clayras-chat-head{
  flex:0 0 auto;
  padding:20px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.clayras-chat-head span{
  display:block;
  color:rgba(255,255,255,.74);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:7px;
}

.clayras-chat-head strong{
  display:block;
  color:#ffffff;
  font-size:19px;
  line-height:1.2;
  font-weight:900;
}

.clayras-chat-close{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.10);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.clayras-chat-close:hover{
  background:#ffffff;
  color:var(--primary);
}

.clayras-chat-body{
  flex:1 1 auto;
  min-height:0;
  max-height:calc(100vh - 230px);
  padding:20px;
  overflow:auto;
}

.clayras-chat-intro{
  margin-bottom:16px;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(94,87,253,.08);
  color:#475569;
  font-size:13.5px;
  line-height:1.55;
  font-weight:700;
}

.clayras-chat-start-form{
  display:grid;
  gap:13px;
}

.clayras-chat-field{
  display:grid;
  gap:7px;
}

.clayras-chat-field label{
  color:#0f172a;
  font-size:13px;
  line-height:1.2;
  font-weight:850;
}

.clayras-chat-field input,
.clayras-chat-field select,
.clayras-chat-field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  background:#ffffff;
  color:#0f172a;
  outline:0;
  font-size:14px;
  font-weight:650;
  transition:.2s ease;
}

.clayras-chat-field input,
.clayras-chat-field select{
  height:46px;
  padding:0 13px;
}

.clayras-chat-field textarea{
  min-height:86px;
  resize:none;
  padding:12px 13px;
  line-height:1.55;
}

.clayras-chat-field input:focus,
.clayras-chat-field select:focus,
.clayras-chat-field textarea:focus,
.clayras-chat-send-row textarea:focus{
  border-color:rgba(94,87,253,.48);
  box-shadow:0 0 0 4px rgba(94,87,253,.10);
}

.clayras-chat-phone-row{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:9px;
}

.clayras-chat-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.clayras-chat-message{
  min-height:20px;
  color:#64748b;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}

.clayras-chat-message.is-error{ color:#dc2626; }
.clayras-chat-message.is-success{ color:#16a34a; }

.clayras-chat-submit{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(94,87,253,.24);
  transition:.22s ease;
}

.clayras-chat-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(94,87,253,.34);
}

.clayras-chat-submit.is-loading{
  opacity:.72;
  pointer-events:none;
}

.clayras-chat-conversation{
  display:grid;
  gap:14px;
}

.clayras-chat-messages{
  height:260px;
  max-height:260px;
  overflow:auto;
  padding:12px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(94,87,253,.10);
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling:touch;
}

.clayras-chat-bubble{
  max-width:84%;
  padding:11px 13px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.55;
  font-weight:650;
  word-break:break-word;
}

.clayras-chat-bubble.user{
  align-self:flex-end;
  border-bottom-right-radius:5px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#ffffff;
}

.clayras-chat-bubble.admin{
  align-self:flex-start;
  border-bottom-left-radius:5px;
  background:#ffffff;
  color:#334155;
  border:1px solid rgba(94,87,253,.12);
}

.clayras-chat-bubble small{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  line-height:1.2;
  opacity:.68;
}

.clayras-chat-send-row{
  display:grid;
  grid-template-columns:1fr 46px;
  gap:9px;
  align-items:end;
}

.clayras-chat-send-row textarea{
  width:100%;
  min-height:46px;
  max-height:110px;
  resize:none;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 13px;
  outline:0;
  color:#0f172a;
  font-size:13.5px;
  line-height:1.45;
  font-weight:650;
}

.clayras-chat-send-row button{
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:var(--primary);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.clayras-chat-send-row button:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

.clayras-chat-hidden{
  display:none !important;
}

.whatsapp{
  right:24px;
  bottom:22px;
  z-index:99980;
}

@media(max-width:640px){
  body.clayras-chat-open{
    overflow:hidden !important;
  }

  #clayrasChatWidget{
    right:18px !important;
    bottom:94px !important;
    z-index:99990 !important;
  }

  .whatsapp{
    right:18px !important;
    bottom:20px !important;
    z-index:99980 !important;
  }

  #clayrasChatWidget:not(.is-open) #clayrasChatBox{
    display:none !important;
  }

  #clayrasChatWidget.is-open #clayrasChatBox{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:102px !important;
    bottom:142px !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:22px !important;
    z-index:99995 !important;
    display:flex !important;
    flex-direction:column !important;
    transform:none !important;
  }

  body.clayras-keyboard-open #clayrasChatWidget.is-open #clayrasChatBox{
    top:10px !important;
    bottom:calc(var(--clayras-keyboard-height, 315px) + 8px) !important;
    min-height:min(400px, calc(100dvh - var(--clayras-keyboard-height, 315px) - 18px)) !important;
  }

  #clayrasChatBox .clayras-chat-head{
    flex:0 0 auto !important;
  }

  #clayrasChatBox .clayras-chat-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    padding:16px !important;
  }

  #clayrasChatIntro{
    flex:0 0 auto !important;
    margin-bottom:12px !important;
  }

  #clayrasChatConversation[hidden]{
    display:none !important;
  }

  #clayrasChatConversation:not([hidden]){
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  #clayrasChatMessages{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:70px !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin:0 0 10px 0 !important;
    padding:10px !important;
  }

  #clayrasChatSendForm{
    flex:0 0 auto !important;
    position:relative !important;
    background:#ffffff !important;
    z-index:30 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #clayrasChatSendForm .clayras-chat-send-row{
    display:grid !important;
    grid-template-columns:1fr 48px !important;
    gap:9px !important;
    align-items:end !important;
  }

  #clayrasChatMessageInput{
    min-height:52px !important;
    height:52px !important;
    max-height:52px !important;
    resize:none !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-head{
    padding:18px 20px !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-head span{
    font-size:12px !important;
    letter-spacing:.14em !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-head strong{
    font-size:22px !important;
    line-height:1.15 !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-body{
    padding:14px !important;
  }

  body.clayras-keyboard-open #clayrasChatIntro{
    padding:12px 14px !important;
    margin-bottom:10px !important;
    font-size:13px !important;
    line-height:1.45 !important;
    border-radius:16px !important;
  }

  body.clayras-keyboard-open #clayrasChatMessages{
    min-height:95px !important;
    margin-bottom:8px !important;
    padding:8px !important;
  }

  body.clayras-keyboard-open #clayrasChatSendForm .clayras-chat-send-row{
    grid-template-columns:1fr 46px !important;
    gap:8px !important;
  }

  body.clayras-keyboard-open #clayrasChatMessageInput{
    min-height:48px !important;
    height:48px !important;
    max-height:48px !important;
  }

  body.clayras-keyboard-open #clayrasChatSendForm button{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }

  body.clayras-keyboard-open #clayrasChatButton,
  body.clayras-keyboard-open .whatsapp{
    opacity:0 !important;
    pointer-events:none !important;
  }
}

@media(max-width:420px){
  #clayrasChatWidget.is-open #clayrasChatBox{
    left:10px !important;
    right:10px !important;
    top:96px !important;
    bottom:134px !important;
  }

  body.clayras-keyboard-open #clayrasChatWidget.is-open #clayrasChatBox{
    top:8px !important;
    bottom:calc(var(--clayras-keyboard-height, 300px) + 6px) !important;
    min-height:min(380px, calc(100dvh - var(--clayras-keyboard-height, 300px) - 14px)) !important;
  }
}
/* =========================================================
   CLAYRAS iOS / Mobile Keyboard Chat Height Fix
   Prevents chat box from becoming too short
========================================================= */

@media (max-width: 640px) {
  body.clayras-keyboard-open #clayrasChatWidget.is-open #clayrasChatBox {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: 14px !important;
    bottom: calc(var(--clayras-keyboard-height, 330px) + 8px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 430px !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-head {
    flex: 0 0 auto !important;
    padding: 18px 20px !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-head span {
    font-size: 12px !important;
    letter-spacing: .14em !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-head strong {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  body.clayras-keyboard-open #clayrasChatBox .clayras-chat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
  }

  body.clayras-keyboard-open #clayrasChatIntro {
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    border-radius: 16px !important;
  }

  body.clayras-keyboard-open #clayrasChatConversation:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.clayras-keyboard-open #clayrasChatMessages {
    flex: 1 1 auto !important;
    min-height: 95px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    margin-bottom: 8px !important;
    padding: 8px !important;
  }

  body.clayras-keyboard-open #clayrasChatSendForm {
    flex: 0 0 auto !important;
    display: block !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 40 !important;
  }

  body.clayras-keyboard-open #clayrasChatSendForm .clayras-chat-send-row {
    display: grid !important;
    grid-template-columns: 1fr 46px !important;
    gap: 8px !important;
    align-items: end !important;
  }

  body.clayras-keyboard-open #clayrasChatMessageInput {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    resize: none !important;
  }

  body.clayras-keyboard-open #clayrasChatSendForm button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

@media (max-width: 420px) {
  body.clayras-keyboard-open #clayrasChatWidget.is-open #clayrasChatBox {
    top: 10px !important;
    bottom: calc(var(--clayras-keyboard-height, 315px) + 6px) !important;
    min-height: 400px !important;
  }
}
/* =========================================================
   CLAYRAS Chat Button Avatar + Label
========================================================= */

.clayras-chat-widget{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:7px !important;
}

.clayras-chat-avatar-button{
  width:66px !important;
  height:66px !important;
  padding:0 !important;
  border-radius:50% !important;
  overflow:visible !important;
  background:linear-gradient(135deg,#5E57FD,#3f37d9) !important;
  box-shadow:0 18px 42px rgba(94,87,253,.34) !important;
}

.clayras-chat-avatar-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.clayras-chat-avatar-icon svg{
  width:58px;
  height:58px;
  display:block;
}

.clayra-avatar-bg{
  fill:#ffffff;
}

.clayra-avatar-hair{
  fill:#2d2a9f;
}

.clayra-avatar-face{
  fill:#ffd7c2;
}

.clayra-avatar-eye{
  fill:#111827;
}

.clayra-avatar-smile{
  fill:none;
  stroke:#111827;
  stroke-width:3;
  stroke-linecap:round;
}

.clayra-avatar-headset{
  fill:none;
  stroke:#5E57FD;
  stroke-width:4;
  stroke-linecap:round;
}

.clayra-avatar-headset-fill{
  fill:#5E57FD;
}

.clayras-chat-button-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:#ffffff;
  color:#2d2a9f;
  font-size:12px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(15,23,42,.14);
  border:1px solid rgba(94,87,253,.16);
}

#clayrasChatWidget.is-open .clayras-chat-button-text,
body.clayras-keyboard-open .clayras-chat-button-text{
  display:none !important;
}

@media(max-width:640px){
  #clayrasChatWidget{
    gap:6px !important;
  }

  .clayras-chat-avatar-button{
    width:64px !important;
    height:64px !important;
  }

  .clayras-chat-avatar-icon,
  .clayras-chat-avatar-icon svg{
    width:56px;
    height:56px;
  }

  .clayras-chat-button-text{
    font-size:11.5px;
    padding:6px 10px;
  }
}
.clayras-chat-button-text{
  display:block;
  margin-top:4px;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:#2d2a9f;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}

#clayrasChatWidget.is-open .clayras-chat-button-text,
body.clayras-keyboard-open .clayras-chat-button-text{
  display:none !important;
}

@media(max-width:640px){
  .clayras-chat-button-text{
    font-size:12px;
    margin-top:3px;
  }
}
/* =========================================================
   Floating Chat + WhatsApp Proper Center Alignment
========================================================= */

:root{
  --clayras-float-right: 22px;
  --clayras-chat-column-width: 160px;
  --clayras-whatsapp-size: 58px;
}

#clayrasChatWidget{
  right: var(--clayras-float-right) !important;
  width: var(--clayras-chat-column-width) !important;
  align-items: center !important;
}

.whatsapp{
  width: var(--clayras-whatsapp-size) !important;
  height: var(--clayras-whatsapp-size) !important;
  right: calc(
    var(--clayras-float-right) + 
    (var(--clayras-chat-column-width) / 2) - 
    (var(--clayras-whatsapp-size) / 2)
  ) !important;
}

@media(max-width:640px){
  :root{
    --clayras-float-right: 18px;
    --clayras-chat-column-width: 150px;
    --clayras-whatsapp-size: 58px;
  }

  #clayrasChatWidget{
    right: var(--clayras-float-right) !important;
    width: var(--clayras-chat-column-width) !important;
  }
}
/* =========================================================
   Mobile Floating Chat + WhatsApp Clean Alignment
========================================================= */

:root{
  --clayras-float-right: 22px;
  --clayras-float-column: 118px;
  --clayras-whatsapp-size: 58px;
}

#clayrasChatWidget{
  right: var(--clayras-float-right) !important;
  width: var(--clayras-float-column) !important;
  align-items: center !important;
}

.whatsapp{
  right: calc(
    var(--clayras-float-right) +
    (var(--clayras-float-column) / 2) -
    (var(--clayras-whatsapp-size) / 2)
  ) !important;
}

.clayras-chat-button-text{
  width: 118px !important;
  max-width: 118px !important;
  padding: 0 !important;
  margin-top: 5px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #2d2a9f !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: normal !important;
}

@media(max-width:640px){
  :root{
    --clayras-float-right: 12px;
    --clayras-float-column: 108px;
    --clayras-whatsapp-size: 58px;
  }

  #clayrasChatWidget{
    right: var(--clayras-float-right) !important;
    bottom: 116px !important;
    width: var(--clayras-float-column) !important;
  }

  .whatsapp{
    right: calc(
      var(--clayras-float-right) +
      (var(--clayras-float-column) / 2) -
      (var(--clayras-whatsapp-size) / 2)
    ) !important;
    bottom: 22px !important;
  }

  .clayras-chat-avatar-button{
    width: 60px !important;
    height: 60px !important;
  }

  .clayras-chat-avatar-icon,
  .clayras-chat-avatar-icon svg{
    width: 52px !important;
    height: 52px !important;
  }

  .clayras-chat-button-text{
    width: 108px !important;
    max-width: 108px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    margin-top: 4px !important;
  }
}

#clayrasChatWidget.is-open .clayras-chat-button-text,
body.clayras-keyboard-open .clayras-chat-button-text{
  display:none !important;
}