/* ==========================================================================
   FluidTech — Sourcing to Solution
   ========================================================================== */

:root{
  --navy:        #0d2b4e;
  --navy-2:      #0a2140;
  --navy-3:      #123663;
  --teal:        #1f8f6b;
  --aqua:        #2f8fd1;
  --amber:       #e0a020;
  --mist:        #f4f7f8;
  --paper:       #ffffff;
  --ink:         #10202f;
  --ink-soft:    #4b5c6b;
  --line:        #e3e9ec;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(13,43,78,0.06);
  --shadow-md: 0 14px 34px rgba(13,43,78,0.14);
  --ease: cubic-bezier(.22,.9,.3,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); color: var(--navy); margin:0 0 .5em; line-height:1.12; }
p{ margin:0 0 1em; color: var(--ink-soft); line-height:1.65; }
ul{ list-style:none; margin:0; padding:0; }
svg{ width:100%; height:100%; fill: currentColor; }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- progress bar ---------- */
.progress-bar{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--teal), var(--aqua));
  z-index: 1000; transition: width .1s linear;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  border: 1.5px solid transparent; cursor:pointer;
}
.btn--primary{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost{ background: transparent; border-color: rgba(13,43,78,.25); color: var(--navy); }
.btn--ghost:hover{ border-color: var(--navy); background: rgba(13,43,78,.04); transform: translateY(-2px); }
.btn--block{ width:100%; }

.eyebrow{
  font-family: var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--teal); margin: 0 0 14px; font-weight:500;
}
.eyebrow--light{ color:#7fd6b8; }

/* ---------- reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
.areas__grid [data-reveal]{ transition-delay: calc(var(--i,0) * 70ms); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  padding: 20px 0;
  transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  padding: 12px 0; background: rgba(244,247,248,0.86); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.header__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.brand__word{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: var(--navy); }
.brand__word span{ color: var(--teal); }

.nav{ display:flex; align-items:center; gap:30px; }
.nav__link{ font-size:.95rem; font-weight:500; color: var(--navy); position:relative; padding:4px 0; }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--teal);
  transition: width .25s var(--ease);
}
.nav__link:hover::after{ width:100%; }
.nav__link--cta{
  background: var(--navy); color:#fff; padding:10px 20px; border-radius:999px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.nav__link--cta::after{ display:none; }
.nav__link--cta:hover{ background: var(--teal); transform: translateY(-1px); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ width:100%; height:2px; background: var(--navy); border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding: 150px 0 90px; }
.hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero__title{ font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing:-.01em; }
.hero__lead{ font-size:1.06rem; max-width: 46ch; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin: 8px 0 40px; }

.hero__stats{ display:flex; gap:36px; border-top:1px solid var(--line); padding-top:24px; }
.hero__stats-num{ display:block; font-family: var(--font-display); font-size:1.6rem; font-weight:700; color: var(--navy); }
.hero__stats-label{ display:block; font-size:.78rem; color: var(--ink-soft); margin-top:2px; }

.beaker-frame{
  position: relative; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 4/5;
  background: linear-gradient(160deg, #dceaf2, #b9d5e6);
}
.beaker-frame__img{ width:100%; height:100%; object-fit:cover; }
.beaker-frame__bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bubble{
  position:absolute; bottom:-10px; border-radius:50%;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
  animation: rise linear forwards;
}
@keyframes rise{
  to{ transform: translateY(-560px) translateX(var(--drift, 10px)); opacity:0; }
}
.beaker-frame__tag{
  position:absolute; left:16px; bottom:16px; background: rgba(10,33,64,.82); color:#fff;
  padding:10px 16px; border-radius: 999px; font-size:.78rem; font-family: var(--font-mono);
  display:flex; align-items:center; gap:9px; backdrop-filter: blur(6px);
}
.beaker-frame__tag .dot{ width:8px; height:8px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(31,143,107,.6); animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(31,143,107,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(31,143,107,0); }
  100%{ box-shadow: 0 0 0 0 rgba(31,143,107,0); }
}

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features{ padding: 10px 0 70px; }
.features__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.feature{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature__icon{ display:inline-flex; width:40px; height:40px; color: var(--teal); margin-bottom:14px; }
.feature__icon svg{ stroke: currentColor; fill: none; }
.feature h3{ font-size:1.02rem; margin-bottom:6px; }
.feature p{ font-size:.9rem; margin:0; }

/* ==========================================================================
   FLOW DIVIDER (signature)
   ========================================================================== */
.flow{ padding: 6px 0 50px; }
.flow__row{ display:flex; align-items:center; gap:18px; }
.flow__label{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--navy); white-space:nowrap; flex-shrink:0;
}
.flow__label--end{ color: var(--teal); }
.flow__pipe{
  position:relative; flex:1; height:60px; border-radius:999px;
  background: linear-gradient(90deg, rgba(47,143,209,.09), rgba(31,143,107,.09));
  overflow:hidden;
}
.flow__wave{ position:absolute; inset:0; width:100%; height:100%; }
.flow__wave path{
  fill:none; stroke: url(#none); stroke: var(--aqua); stroke-width:2.4; opacity:.55;
  stroke-dasharray: 14 10; animation: dash 3.2s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset: -48; } }
.flow__droplet{
  position:absolute; top:50%; width:10px; height:10px; border-radius:50% 50% 50% 0;
  background: var(--teal); transform: translateY(-50%) rotate(45deg);
  animation: travel 6s linear infinite;
}
.flow__droplet--2{ background: var(--aqua); animation-delay: 2s; }
.flow__droplet--3{ background: var(--amber); animation-delay: 4s; }
@keyframes travel{
  0%{ left:-4%; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ left:102%; opacity:0; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 18px 0; overflow:hidden; background:var(--paper); }
.marquee__track{
  display:flex; gap: 26px; white-space:nowrap; width:max-content;
  animation: scroll-left 34s linear infinite;
  font-family: var(--font-mono); font-size:.85rem; color: var(--navy);
}
.marquee__track span:nth-child(odd){ font-weight:500; }
.marquee__track span[aria-hidden]{ color: var(--teal); }
@keyframes scroll-left{ to{ transform: translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* ==========================================================================
   BUSINESS AREAS
   ========================================================================== */
.areas{ padding: 100px 0 40px; }
.section-head{ max-width: 640px; margin-bottom: 50px; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
.section-head__lead{ font-size:1.02rem; }

.areas__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.area-card{
  background: var(--paper); border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--line); position:relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.area-card:hover{ box-shadow: var(--shadow-md); }
.area-card::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:4px;
  background: var(--accent, var(--teal)); transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease); z-index:2;
}
.area-card:hover::before{ transform: scaleX(1); }
.area-card__media{ aspect-ratio: 4/3; overflow:hidden; background:#eef2f4; }
.area-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.area-card:hover .area-card__media img{ transform: scale(1.07); }
.area-card__body{ padding: 20px 22px 24px; position:relative; }
.area-card__index{
  font-family: var(--font-mono); font-size:.72rem; color: var(--accent, var(--teal));
  letter-spacing:.08em; display:block; margin-bottom:6px;
}
.area-card__index::before{ content:"BA-"; opacity:.6; }
.area-card__body h3{ font-size:1.06rem; margin-bottom:6px; }
.area-card__body p{ font-size:.88rem; margin:0; }

/* ==========================================================================
   IOREX FEATURED
   ========================================================================== */
.iorex{ padding: 80px 0; margin-top: 46px; background: linear-gradient(135deg, var(--navy-2), var(--navy-3)); color:#fff; }
.iorex__grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items:center; }
.iorex__badge{
  display:inline-block; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: #7fd6b8; border:1px solid rgba(127,214,184,.35); padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.iorex__content h2{ color:#fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.iorex__lead{ color: rgba(255,255,255,.82); font-size:1.02rem; }
.iorex__list{ margin: 4px 0 30px; display:flex; flex-direction:column; gap:12px; }
.iorex__list li{ display:flex; align-items:center; gap:10px; font-size:.94rem; color:#fff; }
.iorex__list li::before{
  content:""; width:18px; height:18px; flex-shrink:0; border-radius:50%;
  background: rgba(127,214,184,.18); border:1px solid #7fd6b8;
  background-image: linear-gradient(45deg, transparent 65%, #7fd6b8 65%, #7fd6b8 70%, transparent 70%),
                     linear-gradient(-45deg, transparent 55%, #7fd6b8 55%, #7fd6b8 60%, transparent 60%);
}
.iorex__visual{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  background: radial-gradient(circle at 40% 30%, rgba(127,214,184,.28), transparent 60%), rgba(255,255,255,.05);
  padding: 30px; display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
}
.iorex__visual img{ border-radius: 10px; max-height:280px; width:auto; margin:0 auto; }

/* ==========================================================================
   WHY
   ========================================================================== */
.why{ padding: 90px 0; }
.why__inner{ max-width: 760px; }
.why__inner h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.why__inner p:last-child{ font-size:1.04rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ position:relative; background: var(--navy-2); color:#fff; padding: 90px 0 60px; overflow:hidden; }
.contact__wave{ position:absolute; top:-1px; left:0; width:100%; height:80px; color: var(--mist); }
.contact__wave path{ fill: var(--mist); }
.contact__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:start; padding-top: 20px; }
.contact h2{ color:#fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.contact__lead{ color: rgba(255,255,255,.75); max-width: 42ch; }

.contact__list{ display:flex; flex-direction:column; gap:20px; margin-top: 30px; }
.contact__list li{ display:flex; align-items:center; gap:16px; }
.contact__icon{
  width:42px; height:42px; flex-shrink:0; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; padding:10px; color: #7fd6b8;
}
.contact__icon svg{ stroke: currentColor; fill: currentColor; }
.contact__list div{ display:flex; flex-direction:column; gap:4px; }
.contact__list a{
  color:#fff; font-size:.98rem; transition: color .2s var(--ease);
}
.contact__list a:hover{ color: #7fd6b8; }

.contact__card{
  position:relative; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 34px; overflow:hidden;
}
.contact__card-glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(31,143,107,.5), transparent 70%);
  top:-80px; right:-80px; filter: blur(10px);
}
.contact__card h3{ color:#fff; position:relative; }
.contact__card p{ color: rgba(255,255,255,.72); position:relative; font-size:.92rem; }
.contact__card .btn{ position:relative; margin-top:10px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--navy); color: rgba(255,255,255,.85); }
.footer__values{
  display:flex; justify-content:center; flex-wrap:wrap; gap: 42px;
  padding: 26px 28px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.footer__values span{ display:flex; align-items:center; gap:9px; }
.footer__values svg{ width:16px; height:16px; stroke: #7fd6b8; fill:none; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding: 20px 28px; font-size:.82rem; flex-wrap:wrap; gap:8px; }
.footer__tag{ font-family: var(--font-mono); color: #7fd6b8; margin:0; }
.footer__bottom p{ margin:0; color: rgba(255,255,255,.6); }

/* ---------- back to top ---------- */
.to-top{
  position: fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%;
  background: var(--navy); color:#fff; border:none; font-size:1.1rem; cursor:pointer;
  box-shadow: var(--shadow-md); opacity:0; transform: translateY(14px); pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  z-index: 800;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background: var(--teal); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ order:-1; max-width: 460px; margin: 0 auto; }
  .features__grid{ grid-template-columns: repeat(2, 1fr); }
  .areas__grid{ grid-template-columns: repeat(2, 1fr); }
  .iorex__grid{ grid-template-columns: 1fr; }
  .iorex__visual{ order:-1; }
  .contact__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .nav{
    position: fixed; top:0; right:0; height:100vh; width: min(78vw, 320px);
    background: var(--paper); flex-direction:column; align-items:flex-start; justify-content:center;
    gap: 26px; padding: 40px; box-shadow: -12px 0 32px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .4s var(--ease); z-index: 950;
  }
  .nav.is-open{ transform: translateX(0); }
  .nav__link{ font-size:1.1rem; }
  .nav-toggle{ display:flex; }
  .hero{ padding: 130px 0 60px; }
  .hero__stats{ gap:24px; flex-wrap:wrap; }
  .features__grid{ grid-template-columns: 1fr; }
  .areas__grid{ grid-template-columns: 1fr; }
  .areas{ padding: 70px 0 30px; }
  .flow__row{ gap:10px; }
  .flow__label{ font-size:.6rem; }
  .contact__card{ padding: 26px; }
  .footer__bottom{ justify-content:center; text-align:center; }
}