@charset "utf-8";
/* CSS Document */
:root{
  --mops-blue:#07158b;
  --mops-blue-2:#1023b8;
  --mops-orange:#ff8700;
  --mops-orange-soft:#ffb15a;

  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#fbfcfe;
  --surface-3:#f8fbff;

  --text:#0b1220;
  --muted:#5f6b7a;
  --line:rgba(9,18,40,.09);

  --shadow-xs:0 8px 20px rgba(0,0,0,.04);
  --shadow-sm:0 14px 34px rgba(0,0,0,.06);
  --shadow-md:0 24px 64px rgba(0,0,0,.10);
  --shadow-lg:0 36px 110px rgba(0,0,0,.15);

  --radius-xxl:42px;
  --radius-xl:34px;
  --radius-lg:28px;
  --radius-md:22px;
  --radius-sm:16px;

  --container:1440px;
  --nav-h:82px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);

  --reveal-distance:26px;
  --reveal-duration:.85s;
  --reveal-ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   FONT
   ========================================================= */

@font-face{
  font-family:'avenir_35light';
  src:
    url('fonts/ael___-webfont.woff2') format('woff2'),
    url('fonts/ael___-webfont.woff') format('woff');
  font-weight:400;
  font-style:normal;
}

/* =========================================================
   BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-top:var(--nav-h);

  font-family:'avenir_35light',Arial,sans-serif;
  color:var(--text);

  background:
    radial-gradient(
      1200px 620px at 0% 0%,
      rgba(16,35,184,.04),
      transparent 55%
    ),
    radial-gradient(
      900px 540px at 100% 20%,
      rgba(255,135,0,.03),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #f4f7fb 100%
    );

  line-height:1.65;
  letter-spacing:.01em;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;

  pointer-events:none;
  z-index:-1;

  opacity:.045;

  background-image:
    radial-gradient(
      circle at 1px 1px,
      rgba(7,21,139,.14) 1px,
      transparent 0
    );

  background-size:24px 24px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.35),
      transparent 60%
    );
}

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

a{
  text-decoration:none;
  color:var(--mops-blue);
}

a:hover{
  color:var(--mops-orange);
}

section{
  position:relative;
  padding:120px 0;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
summary,
.btn,
.nav-links a,
.eyebrow,
.stat strong,
.tag,
.logo-chip,
.story-kicker,
.story-number,
.quote-kicker,
.testimonial-source,
.story-quote-source,
.metric-label,
.metric-value,
.platform-kicker,
.platform-card h3,
.contact-card h3,
.footer-card h3,
.member h3,
.team-modal-kicker,
.team-modal-role,
.team-modal-tags span,
.help-title,
.product-kicker,
.security-pill,
.trust-line{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6{
  margin-top:0;
  letter-spacing:-.04em;
  font-weight:780;
  line-height:1.04;
}

p,
li,
span,
input,
textarea,
label,
blockquote{
  font-family:'avenir_35light',Arial,sans-serif;
}

/* =========================================================
   GENERIC SECTION HEAD
   ========================================================= */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;

  border-radius:999px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);

  color:rgba(255,255,255,.9);

  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12);

  backdrop-filter:blur(10px);
}

.eyebrow.light{
  background:rgba(7,21,139,.045);
  border-color:rgba(7,21,139,.08);
  color:var(--mops-blue);
  box-shadow:none;
}

.section-head{
  text-align:center;
  max-width:980px;
  margin:0 auto 52px;
}

.section-head h2{
  margin:18px 0 14px;

  font-size:clamp(38px,4vw,68px);
  line-height:1.02;

  color:var(--text);
}

.section-head p{
  margin:0;

  font-size:18px;
  line-height:1.85;

  color:var(--muted);
}

.section-head h2::after{
  content:"";

  display:block;

  width:76px;
  height:4px;

  margin:18px auto 0;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb868,
      #ff8700
    );

  box-shadow:
    0 10px 24px rgba(255,135,0,.16);
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

header{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:1000;

  height:var(--nav-h);

  background:rgba(255,255,255,.74);

  backdrop-filter:
    blur(22px)
    saturate(180%);

  border-bottom:
    1px solid rgba(255,255,255,.55);

  box-shadow:
    0 10px 32px rgba(0,0,0,.04);
}

.nav-wrap{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.brand{
  display:flex;
  align-items:center;

  gap:14px;

  color:var(--text);
}

.brand img{
  width:138px;
  height:auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:12px;

  flex-wrap:nowrap;
}

.nav-links a{
  padding:10px 14px;

  border-radius:999px;

  white-space:nowrap;

  font-size:14px;
  font-weight:700;

  color:rgba(11,18,32,.82);

  transition:
    all .28s var(--ease);
}

.nav-links a:hover,
.nav-links a.active{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #ffab49,
      #ff8700
    );

  box-shadow:
    0 10px 22px rgba(255,135,0,.18);

  transform:translateY(-1px);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-toggle{
  display:none;

  width:46px;
  height:46px;

  border-radius:14px;

  border:
    1px solid rgba(10,20,40,.10);

  background:#fff;
  color:var(--text);

  font-size:20px;

  box-shadow:var(--shadow-xs);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:14px 22px;

  border-radius:999px;
  border:1px solid transparent;

  font-weight:800;

  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease),
    opacity .28s var(--ease);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );

  color:#111;

  box-shadow:
    0 18px 35px rgba(255,135,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-secondary{
  background:rgba(255,255,255,.08);

  border-color:rgba(255,255,255,.18);

  color:#fff;

  backdrop-filter:blur(10px);
}

.btn-secondary:hover{
  color:#fff;

  background:rgba(255,255,255,.12);

  border-color:rgba(255,255,255,.24);
}

/* =========================================================
   SHARED SECTION SHELL
   ========================================================= */

.hero,
.trust-band,
.usecases-premium,
.testimonials-premium,
.platform-enterprise,
.solutions,
.showcase,
.benefits,
.pricing,
.company,
.faq,
.contact{
  margin:18px 120px 0;

  border-radius:42px;

  overflow:hidden;

  box-shadow:
    0 26px 80px rgba(0,0,0,.05);

  border:
    1px solid rgba(255,255,255,.62);
}

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

.hero{
  position:relative;

  padding:42px 0 108px;

  color:#fff;

  background:
    radial-gradient(
      900px 500px at 12% 18%,
      rgba(18,44,214,.24),
      transparent 58%
    ),
    radial-gradient(
      760px 420px at 82% 12%,
      rgba(255,135,0,.12),
      transparent 52%
    ),
    radial-gradient(
      900px 400px at 50% 120%,
      rgba(255,255,255,.06),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      #06137a 0%,
      #03081b 100%
    );

  box-shadow:
    0 26px 80px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05);

  isolation:isolate;
}

.hero-grid{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:34px;

  margin:0 auto;
}

.hero-copy,
.hero-panel{
  width:100%;
  min-width:0;
}

.hero-copy{
  text-align:center;
}

.hero-copy h1{
  margin:18px 0;

  font-size:clamp(54px,6vw,98px);
  line-height:.98;

  color:#fff;
}

.logomo{
  font-family:'avenir_35light',Arial,sans-serif;
  font-weight:300;
}

.claimmo{
  font-family:'avenir_35light',Arial,sans-serif;
  font-weight:300;
  text-transform:lowercase;
}

.logops{
  color:var(--mops-orange);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight:700;
}

.mops-meaning{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  opacity:.88;
}

.hero-intro{
  margin:0 auto 22px;

  max-width:920px;

  font-size:20px;
  line-height:1.85;

  color:rgba(255,255,255,.84);
}

.hero-brand{
  display:block;

  margin-bottom:18px;

  font-size:clamp(38px,7vw,96px);
  line-height:.9;
}

.hero-title{
  display:block;

  font-size:clamp(42px,4.5vw,74px);
  line-height:1;

  letter-spacing:-.05em;
}

.hero-claim-wrap{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:44px;

  margin:28px auto 24px;
  padding:40px 46px;

  border-radius:36px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.03)
    );

  backdrop-filter:blur(18px);

  box-shadow:
    0 26px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.12);

  overflow:hidden;
}

.hero-claim-wrap::before{
  content:"";

  position:absolute;
  inset:-35%;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,.09) 50%,
      transparent 60%
    );

  transform:
    translateX(-60%)
    rotate(8deg);

  animation:
    heroBrandSweep 10s linear infinite;

  pointer-events:none;
}

.hero-claim-wrap::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-120px;
  top:-160px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,135,0,.10),
      transparent 68%
    );

  pointer-events:none;
}

.hero-claim-wrap h1{
  position:relative;
  z-index:2;

  margin:0;

  text-align:left;

  color:#fff;
}

.hero-side-logo{
  position:relative;
  z-index:2;

  flex:0 0 auto;

  display:block;

  width:228px;
  height:228px;

  margin:0 auto;
  padding:20px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.20),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:
    0 22px 54px rgba(0,0,0,.20),
    0 14px 32px rgba(255,135,0,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-subline{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin:22px 0 24px;
}

.hero-subline span{
  padding:8px 13px;

  border-radius:12px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:14px;
  font-weight:700;

  color:#fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-copy p{
  margin:0 auto;

  max-width:1040px;

  font-size:20px;
  line-height:1.9;

  color:rgba(255,255,255,.84);
}

.trust-line{
  display:inline-flex;
  align-items:center;

  gap:10px;

  margin-top:22px;
  padding:10px 16px;

  border-radius:999px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  color:#fff;

  font-size:14px;
  font-weight:700;
}

.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:14px;

  margin-top:28px;
}

.hero-stats{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;

  margin-top:30px;

  width:100%;
}

.stat{
  padding:22px 20px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.05)
    );

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 30px rgba(0,0,0,.10);

  backdrop-filter:blur(10px);
}

.stat strong{
  display:block;

  margin-bottom:8px;

  font-size:28px;
  line-height:1;
  font-weight:800;

  color:#fff;
}

.stat span{
  font-size:14px;
  line-height:1.6;

  color:rgba(255,255,255,.76);
}

.hero-proof{
  position:relative;

  width:100%;
  max-width:1100px;

  margin:8px auto 0;
  padding:24px 26px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.07)
    );

  border:
    1px solid rgba(255,255,255,.14);

  box-shadow:
    0 24px 60px rgba(0,0,0,.12);

  backdrop-filter:blur(14px);

  text-align:center;
}

.hero-proof .quote-kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  margin-bottom:10px;
  padding:7px 12px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:#fff;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.14);
}

.hero-proof blockquote{
  margin:0;

  font-size:clamp(24px,2.8vw,40px);
  line-height:1.28;

  color:#fff;

  font-weight:700;
}

.hero-proof p{
  margin:12px 0 0;

  font-size:14px;
  line-height:1.6;

  color:rgba(255,255,255,.76);
}

.hero-panel{
  position:relative;

  margin-top:8px;
  padding:18px;

  border-radius:32px;

  background:rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:var(--shadow-lg);

  backdrop-filter:blur(14px);
}

.hero-screen{
  position:relative;
  z-index:1;

  padding:20px;

  border-radius:26px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.93),
      rgba(255,255,255,.84)
    );

  color:var(--text);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6);
}

.signal-stack{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;
}

.signal-card{
  margin-bottom:14px;
  padding:20px;

  border-radius:22px;

  background:#fff;

  border:
    1px solid rgba(9,18,40,.08);

  box-shadow:
    0 12px 28px rgba(7,21,139,.05);

  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease);
}

.signal-card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 34px rgba(7,21,139,.08);

  border-color:
    rgba(255,135,0,.14);
}

.signal-card h3{
  display:flex;
  align-items:center;

  gap:12px;

  margin:0 0 10px;

  font-size:19px;
  line-height:1.24;

  font-weight:800;

  color:var(--text);
}

.signal-card p{
  margin:0;

  color:var(--muted);

  font-size:15px;
  line-height:1.72;
}

.signal-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;
  min-width:34px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ffbf74 0%,
      #ff8c10 100%
    );

  color:#fff;

  font-size:15px;
  font-weight:800;

  box-shadow:
    0 10px 20px rgba(255,135,0,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}

/* =========================================================
   TAGS / PILLS
   ========================================================= */

.tag-list{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:14px;
}

.tag,
.logo-chip,
.security-pill,
.team-modal-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  border-radius:12px;

  background:rgba(7,21,139,.035);

  border:
    1px solid rgba(7,21,139,.07);

  font-size:13px;
  font-weight:700;

  color:rgba(11,18,32,.74);

  cursor:default;
}

/* =========================================================
   TRUST
   ========================================================= */

.trust-band{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );

  padding:44px 0;
}

.trust-band-wrap{
  display:grid;

  gap:22px;

  text-align:center;
}

.trust-band h3{
  margin:0;

  font-size:28px;
  line-height:1.15;

  color:var(--text);
}

.logo-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:14px;
}

.logo-chip{
  padding:12px 16px;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 12px 28px rgba(7,21,139,.05);

  font-size:14px;
}

.metrics-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;

  margin-top:12px;
}

.metric-card{
  padding:24px 20px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fcfdff
    );

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 16px 42px rgba(7,21,139,.05);

  text-align:center;
}

.metric-value{
  display:block;

  margin-bottom:10px;

  font-size:34px;
  line-height:1;

  font-weight:800;

  color:var(--mops-blue);
}

.metric-label{
  display:block;

  font-size:15px;
  line-height:1.65;

  font-weight:700;

  color:var(--muted);
}

/* =========================================================
   STORY / USE CASES
   ========================================================= */

.usecases-premium{
  background:
    radial-gradient(
      circle at top left,
      rgba(7,21,139,.04),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(255,135,0,.04),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #ffffff 100%
    );
}

.story-row{
  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:80px;

  align-items:center;

  margin:120px 0;

  perspective:1400px;
}

.story-row.reverse{
  grid-template-columns:.8fr 1.2fr;
}

.story-row.reverse .story-copy{
  order:2;
}

.story-row.reverse .story-visual{
  order:1;
}

.story-row-wide{
  grid-template-columns:1.2fr .8fr;
}

.story-row-wide.reverse{
  grid-template-columns:.8fr 1.2fr;
}

.story-row-wide.story-desktop{
  grid-template-columns:.72fr 1.58fr;

  gap:92px;
}

.story-desktop .story-visual{
  width:100%;
  max-width:none;
}

.story-number{
  display:block;

  margin-bottom:14px;

  color:var(--mops-orange);

  font-size:13px;
  font-weight:800;

  letter-spacing:.18em;
}

.story-kicker{
  display:block;

  margin-bottom:14px;

  color:var(--mops-blue);

  font-size:14px;
  font-weight:800;
}

.story-copy{
  transition:
    transform .65s var(--ease-soft);
}

.story-copy h3{
  margin:0 0 20px;

  font-size:clamp(34px,4vw,66px);
}

.story-copy p{
  margin-bottom:26px;

  color:var(--muted);

  font-size:19px;
  line-height:1.85;
}

.story-copy ul{
  display:grid;

  gap:12px;

  list-style:none;

  padding:0;
  margin:0;
}

.story-copy li{
  position:relative;

  padding-left:26px;

  color:#344050;

  font-weight:600;
}

.story-copy li::before{
  content:"";

  position:absolute;

  left:0;
  top:8px;

  width:10px;
  height:10px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ffb867,
      #ff8700
    );
}

.story-visual{
  width:100%;

  justify-self:center;

  transform-style:preserve-3d;
}

.story-row:not(.story-row-wide) .story-visual{
}

.story-screen{
  position:relative;

  padding:18px;

  border-radius:34px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbff
    );

  border:
    1px solid var(--line);

  box-shadow:
    0 30px 90px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.72);

  overflow:hidden;

  transition:
    transform .75s var(--ease-soft),
    box-shadow .75s var(--ease-soft),
    border-color .45s var(--ease);
}

.story-screen::before{
  content:"";

  position:absolute;
  inset:-40%;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,.45) 50%,
      transparent 60%
    );

  transform:
    translateX(-50%)
    rotate(10deg);

  animation:
    sweep 9s linear infinite;

  pointer-events:none;

  z-index:3;
}

.story-screen::after{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  top:-80px;
  right:-80px;

  border-radius:50%;

  filter:blur(85px);

  opacity:.18;

  pointer-events:none;

  z-index:1;
}

.story-screen.orange::after{
  background:#ff8700;
}

.story-screen.blue::after{
  background:#1023b8;
}

.story-screen-inner{
  position:relative;
  z-index:2;

  border-radius:24px;

  overflow:hidden;

  transform:translateZ(0);

  transition:
    transform .8s var(--ease-soft),
    filter .8s var(--ease-soft);
}

.story-screen-inner::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:4;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,135,0,.18),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(7,21,139,.22),
      rgba(2,8,20,.10)
    );

  opacity:1;

  transition:
    opacity .7s var(--ease-soft);

  pointer-events:none;
}

.story-screen video,
.story-screen img{
  width:100%;

  border-radius:24px;

  min-height:480px;

  object-fit:cover;

  transform:scale(1.01);

  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    filter 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.story-screen video{
  opacity:0;

  filter:
    blur(10px)
    brightness(.45)
    saturate(.8);

  transform:scale(1.04);
}

.story-row.video-active .story-screen video{
  opacity:1;

  filter:
    blur(0)
    brightness(1)
    saturate(1);

  transform:scale(1);
}

.story-row.video-active .story-screen-inner::before{
  opacity:0;
}

.story-row.video-active .story-screen{
  animation:
    videoPop .85s var(--ease-soft) both;
}

.story-row-wide:not(.story-desktop) .story-screen video,
.story-row-wide:not(.story-desktop) .story-screen img{
  min-height:560px;
}

.story-row:not(.story-row-wide) .story-screen video,
.story-row:not(.story-row-wide) .story-screen img{
  object-fit:contain;

  background:#f8fbff;
}

.story-desktop .story-screen-inner{
  width:100%;
}

.story-desktop .story-screen video,
.story-desktop .story-screen img{
  width:100%;

  min-height:0;

  object-fit:cover;
}

.story-screen.is-tilting{
  will-change:transform;
}

.story-row:hover .story-screen{
  transform:
    translateY(-12px)
    scale(1.012);

  box-shadow:
    0 42px 110px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.8);

  border-color:
    rgba(255,135,0,.14);
}

.story-row:hover .story-screen-inner{
  transform:
    translateY(-4px)
    scale(1.01);
}

.story-row:hover .story-screen img{
  transform:
    scale(1.035);

  filter:
    saturate(1.04)
    contrast(1.02);
}

.story-row:hover .story-copy{
  transform:translateY(-4px);
}

.story-quote{
  margin-top:24px;

  padding:18px 18px 16px;

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f9fbff
    );

  border:
    1px solid rgba(9,18,40,.08);

  box-shadow:
    0 16px 36px rgba(7,21,139,.05);
}

.story-quote.compact{
  margin-top:22px;

  padding:16px 16px 14px;
}

.story-quote blockquote{
  margin:0;

  color:var(--text);

  font-size:18px;
  line-height:1.62;

  font-weight:700;
}

.story-quote.compact blockquote{
  font-size:17px;
}

.story-quote-source{
  display:block;

  margin-top:10px;

  font-size:13px;
  line-height:1.55;

  color:var(--muted);

  font-weight:700;
}

/* =========================================================
   SHARED CARDS
   ========================================================= */

.testimonial-card,
.platform-card,
.solution-card,
.product-suite,
.benefit,
.member,
details,
.pricing-list,
.pricing-side,
.company-box,
.values-box,
.team-box,
.cert-box,
.faq-box,
.contact-box,
.footer-card{
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fcfdff
    );

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 16px 42px rgba(7,21,139,.05);

  transition:
    transform .32s var(--ease),
    box-shadow .32s var(--ease),
    border-color .32s var(--ease),
    background .32s var(--ease);
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials-premium{
  position:relative;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,135,0,.08),
      transparent 36%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(7,21,139,.06),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #eef4ff 100%
    );
}

.testimonial-feature{
  position:relative;

  max-width:1040px;

  margin:0 auto 40px;
  padding:42px 44px;

  border-radius:34px;

  background:
    linear-gradient(
      160deg,
      #07158b 0%,
      #1023b8 100%
    );

  color:#fff;

  box-shadow:
    0 30px 80px rgba(7,21,139,.18);

  overflow:hidden;
}

.testimonial-feature::before{
  content:"“";

  position:absolute;

  top:-20px;
  left:20px;

  font-size:140px;
  line-height:1;

  font-weight:800;

  color:rgba(255,255,255,.08);
}

.testimonial-feature blockquote{
  position:relative;
  z-index:1;

  margin:0;

  font-size:clamp(24px,3vw,42px);
  line-height:1.28;

  font-weight:700;

  color:#fff;
}

.testimonial-feature .testimonial-source{
  position:relative;
  z-index:1;

  margin-top:14px;

  color:rgba(255,255,255,.8);

  font-size:14px;
  line-height:1.6;
}

.testimonial-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:22px;
}

.testimonial-card{
  padding:26px 24px;

  border-radius:28px;
}

.testimonial-card:hover,
.platform-card:hover,
.solution-card:hover,
.product-suite:hover,
.member:hover,
details:hover{
  transform:translateY(-4px);

  box-shadow:
    0 22px 54px rgba(7,21,139,.08);

  border-color:
    rgba(255,135,0,.14);
}

.testimonial-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;

  margin-bottom:18px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );

  color:#111;

  font-size:22px;

  box-shadow:
    0 14px 30px rgba(255,135,0,.20);
}

.testimonial-card blockquote{
  margin:0;

  color:var(--text);

  font-size:18px;
  line-height:1.7;

  font-weight:700;
}

.testimonial-card .testimonial-source{
  display:block;

  margin-top:14px;

  font-size:13px;
  line-height:1.6;

  color:var(--muted);

  font-weight:700;
}

/* =========================================================
   PLATFORM
   ========================================================= */

.platform-enterprise{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );
}

.platform-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:22px;
}

.platform-card{
  padding:26px;

  border-radius:30px;
}

.platform-kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  width:fit-content;

  margin-bottom:14px;
  padding:8px 12px;

  border-radius:999px;

  background:rgba(255,135,0,.08);

  border:
    1px solid rgba(255,135,0,.12);

  color:var(--mops-orange);

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.platform-card h3{
  margin:0 0 10px;

  font-size:26px;
  line-height:1.15;

  font-weight:800;

  color:var(--text);
}

.platform-card p{
  margin:0;

  color:var(--muted);

  line-height:1.82;

  font-size:17px;
}

.platform-pill-row{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:16px;
}

/* =========================================================
   SOLUTIONS
   ========================================================= */

.solutions,
.showcase,
.benefits,
.pricing,
.company,
.faq{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );
}

.solution-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:20px;
}

.solution-top{
  padding:22px 24px;

  background:
    radial-gradient(
      520px 240px at 18% 18%,
      rgba(255,135,0,.10),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(7,21,139,.04),
      rgba(7,21,139,.015)
    );

  border-bottom:
    1px solid rgba(9,18,40,.06);
}

.solution-top h3{
  margin:0;

  font-size:24px;
  line-height:1.2;

  font-weight:800;

  color:var(--text);
}

.solution-top p{
  margin:9px 0 0;

  font-size:15px;
  line-height:1.7;

  color:rgba(11,18,32,.70);
}

.solution-body{
  padding:22px 24px;
}

.solution-body p{
  margin:0;

  color:var(--muted);

  line-height:1.82;
}

.solution-body ul{
  display:grid;

  gap:10px;

  margin:18px 0 0;
  padding:0;

  list-style:none;
}

.solution-body li{
  position:relative;

  padding-left:24px;

  color:var(--muted);

  line-height:1.68;
}

.solution-body li::before{
  content:"";

  position:absolute;

  left:0;
  top:8px;

  width:9px;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );
}

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

.product-stack{
  display:grid;

  gap:24px;

  max-width:1180px;

  margin:0 auto;
}

.product-suite{
  display:grid;

  grid-template-columns:
    420px 1fr;

  gap:28px;

  align-items:center;

  padding:24px;

  border-radius:32px;
}

.product-media{
  position:relative;

  overflow:hidden;

  padding:18px;

  min-height:300px;

  border-radius:28px;

  background:
    radial-gradient(
      520px 240px at 18% 18%,
      rgba(255,135,0,.10),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      rgba(7,21,139,.06),
      rgba(255,255,255,.96)
    );
}

.product-media::before{
  content:"";

  position:absolute;
  inset:-40%;

  background:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.42) 50%,
      transparent 65%
    );

  transform:
    translateX(-35%)
    rotate(12deg);

  opacity:.42;

  animation:
    sweep 9s cubic-bezier(.2,.8,.2,1) infinite;

  pointer-events:none;
}

.product-media img{
  position:relative;
  z-index:1;

  width:100%;
  height:100%;

  min-height:264px;

  object-fit:cover;

  border-radius:22px;

  box-shadow:
    0 24px 60px rgba(0,0,0,.16),
    0 0 0 8px rgba(255,255,255,.55);
}

.product-copy{
  display:flex;
  flex-direction:column;

  gap:14px;
}

.product-kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  width:fit-content;

  padding:8px 12px;

  border-radius:999px;

  background:rgba(255,135,0,.08);

  border:
    1px solid rgba(255,135,0,.12);

  color:var(--mops-orange);

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.product-copy h3{
  margin:0;

  font-size:clamp(28px,3vw,38px);
  line-height:1.08;

  font-weight:800;

  color:var(--text);
}

.product-copy p{
  margin:0;

  color:var(--muted);

  font-size:17px;
  line-height:1.82;
}

.product-points{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px 16px;

  margin-top:6px;
  padding:0;

  list-style:none;
}

.product-points li{
  position:relative;

  padding:
    13px 14px 13px 34px;

  border-radius:18px;

  background:#fff;

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 10px 24px rgba(7,21,139,.04);

  color:var(--muted);

  line-height:1.62;
}

.product-points li::before{
  content:"";

  position:absolute;

  left:14px;
  top:18px;

  width:9px;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );
}

.product-note{
  margin-top:4px;

  padding:14px 16px;

  border-radius:18px;

  background:rgba(7,21,139,.035);

  border:
    1px solid rgba(7,21,139,.06);

  color:var(--muted);

  font-size:15px;
  line-height:1.72;
}

.horizontal-suite{
  padding:30px;

  border-radius:32px;
}

.horizontal-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;

  margin-top:20px;
}

.horizontal-card{
  padding:24px;

  border-radius:26px;

  background:#fff;

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 12px 30px rgba(7,21,139,.05);
}

.horizontal-card i{
  margin-bottom:16px;

  color:var(--mops-orange);

  font-size:28px;
}

.horizontal-card h4{
  margin:0 0 10px;

  font-size:20px;
  line-height:1.2;
}

.horizontal-card p{
  margin:0;

  color:var(--muted);

  line-height:1.75;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.benefit-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}

.benefit{
  padding:24px 20px;

  border-radius:26px;

  text-align:center;
}

.benefit strong{
  display:block;

  margin-bottom:10px;

  font-size:32px;
  font-weight:800;

  color:var(--mops-blue);
}

.benefit span{
  display:block;

  font-size:15px;
  line-height:1.7;

  color:var(--muted);
}

/* =========================================================
   PRICING / OPERATING MODEL
   ========================================================= */

.pricing-grid{
  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:26px;

  align-items:center;
}

.pricing-list{
  padding:18px;

  border-radius:30px;
}

.pricing-row{
  display:grid;

  grid-template-columns:
    66px 1fr;

  gap:16px;

  align-items:start;

  padding:18px;

  border-radius:20px;

  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease);
}

.pricing-row:hover{
  background:
    radial-gradient(
      520px 220px at 18% 18%,
      rgba(255,135,0,.08),
      transparent 60%
    ),
    rgba(7,21,139,.02);

  transform:translateY(-2px);
}

.pricing-badge{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(7,21,139,.06),
      rgba(255,255,255,.94)
    );

  border:
    1px solid rgba(9,18,40,.06);

  box-shadow:var(--shadow-xs);
}

.pricing-badge i{
  font-size:24px;

  color:var(--mops-orange);
}

.pricing-row h3{
  margin:0 0 8px;

  font-size:20px;
  font-weight:800;

  color:var(--text);
}

.pricing-row p{
  margin:0;

  color:var(--muted);

  line-height:1.78;
}

.pricing-side{
  position:relative;

  overflow:hidden;

  padding:24px;

  border-radius:32px;

  background:
    radial-gradient(
      500px 220px at 20% 20%,
      rgba(255,135,0,.12),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      #07158b 0%,
      #020814 100%
    );

  color:#fff;

  box-shadow:
    0 26px 72px rgba(2,8,20,.22);

  border:
    1px solid rgba(255,255,255,.08);
}

.pricing-side::before{
  content:"";

  position:absolute;
  inset:-50%;

  background:
    radial-gradient(
      circle at 50% 36%,
      rgba(255,255,255,.08),
      transparent 40%
    );

  pointer-events:none;
}

.pricing-side h3,
.pricing-side p,
.pricing-points{
  position:relative;
  z-index:1;
}

.pricing-side h3{
  margin:0 0 12px;

  font-size:30px;
  font-weight:800;

  color:#fff;
}

.pricing-side p{
  margin:0 0 20px;

  color:rgba(255,255,255,.84);

  line-height:1.8;
}

.pricing-points{
  display:grid;

  gap:10px;
}

.pricing-points div{
  padding:14px 16px;

  border-radius:16px;

  background:rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.14);

  font-weight:700;

  color:#fff;

  backdrop-filter:blur(8px);
}

/* =========================================================
   COMPANY
   ========================================================= */

.company-top{
  display:grid;

  grid-template-columns:
    1fr .95fr;

  gap:22px;

  align-items:start;
}

.company-box,
.values-box,
.cert-box{
  padding:26px;

  border-radius:30px;
}

.company-box h3,
.values-box h3,
.team-box h3,
.cert-box h3{
  margin-bottom:12px;

  font-size:24px;
  font-weight:800;

  color:var(--text);
}

.company-box p,
.values-box p{
  margin:0;

  color:var(--muted);

  line-height:1.82;
}

.company-list{
  display:grid;

  gap:10px;

  margin:18px 0 0;
  padding:0;

  list-style:none;
}

.company-list li,
.value-pill{
  position:relative;

  padding:
    12px 14px 12px 38px;

  border-radius:16px;

  background:rgba(7,21,139,.035);

  border:
    1px solid rgba(7,21,139,.06);

  color:var(--muted);
}

.company-list li::before,
.value-pill::before{
  content:"";

  position:absolute;

  left:15px;
  top:17px;

  width:9px;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );
}

.values-box{
  background:
    radial-gradient(
      680px 260px at 20% 20%,
      rgba(255,135,0,.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #fbfcff
    );
}

.values-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  margin-top:18px;
}

.value-pill{
  padding:
    14px 14px 14px 40px;

  box-shadow:
    0 8px 20px rgba(7,21,139,.03);
}

.value-pill::before{
  left:16px;
  top:18px;

  width:10px;
  height:10px;
}

.team-box{
  margin-top:22px;
  padding:22px;

  border-radius:30px;
}

.team-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}

.member{
  cursor:pointer;

  padding:18px 14px;

  border-radius:24px;

  text-align:center;
}

.member img{
  width:88px;
  height:88px;

  margin:0 auto;

  border-radius:999px;

  object-fit:cover;

  border:
    6px solid rgba(255,135,0,.14);

  box-shadow:
    0 16px 36px rgba(0,0,0,.10);
}

.member h3{
  margin:12px 0 6px;

  font-size:18px;
  font-weight:800;

  color:var(--text);
}

.member p{
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.58;
}

.cert-box{
  margin-top:22px;

  text-align:center;
}

.cert-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:16px;

  margin-top:16px;
}

.cert-row img{
  width:auto;

  max-height:92px;

  border-radius:14px;

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 12px 28px rgba(7,21,139,.05);

  background:#fff;
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-box{
  padding:18px;

  border-radius:30px;
}

.faq-grid{
  display:grid;

  gap:12px;
}

details{
  padding:0 16px;

  border-radius:20px;
}

summary{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  list-style:none;

  cursor:pointer;

  padding:20px 4px;

  font-size:18px;
  font-weight:800;

  color:var(--text);
}

summary::-webkit-details-marker{
  display:none;
}

details p{
  margin:0 0 18px;

  color:var(--muted);

  line-height:1.8;
}

details[open]{
  border-color:
    rgba(255,135,0,.18);

  box-shadow:
    0 18px 34px rgba(7,21,139,.06);
}

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

.contact{
  color:#fff;

  background:
    radial-gradient(
      1000px 500px at 18% 22%,
      rgba(10,25,160,.24),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 82% 18%,
      rgba(0,0,0,.36),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      #07158b 0%,
      #020814 100%
    );

  box-shadow:
    0 30px 88px rgba(2,8,20,.20);
}

.contact .section-head h2{
  color:#fff;
}

.contact .section-head p{
  color:rgba(255,255,255,.82);
}

.contact-box{
  padding:24px;

  border-radius:30px;

  background:rgba(255,255,255,.08);

  border-color:
    rgba(255,255,255,.12);

  box-shadow:
    0 28px 70px rgba(0,0,0,.18);

  backdrop-filter:blur(14px);
}

.contact-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin-bottom:18px;
}

.contact-card{
  display:flex;
  align-items:center;

  gap:14px;

  padding:18px;

  border-radius:22px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease);
}

.contact-card:hover{
  transform:translateY(-2px);

  background:rgba(255,255,255,.11);

  border-color:
    rgba(255,255,255,.18);
}

.contact-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );

  color:#111;

  font-size:21px;

  box-shadow:
    0 14px 30px rgba(255,135,0,.20);
}

.contact-card h3{
  margin:0 0 6px;

  font-size:16px;
  font-weight:800;

  color:#fff;
}

.contact-card p,
.contact-card a{
  margin:0;

  color:rgba(255,255,255,.82);

  line-height:1.62;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;

  gap:14px;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  position:relative;

  overflow:hidden;

  padding-top:66px;
  margin-top:28px;

  background:#060a1d;

  color:rgba(255,255,255,.84);
}

.footer-card{
  position:relative;

  overflow:hidden;

  max-width:980px;

  margin:0 auto 32px;
  padding:24px;

  border-radius:30px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:
    0 26px 66px rgba(0,0,0,.18);

  text-align:center;

  backdrop-filter:blur(12px);
}

.footer-card::after{
  content:"";

  position:absolute;
  inset:-40%;

  background:
    linear-gradient(
      120deg,
      transparent 38%,
      rgba(255,255,255,.26) 50%,
      transparent 62%
    );

  transform:
    translateX(-55%)
    rotate(12deg);

  opacity:.35;

  animation:
    sweep 10s cubic-bezier(.2,.8,.2,1) infinite;

  pointer-events:none;
}

.footer-card h3{
  position:relative;
  z-index:1;

  margin:0 0 14px;

  font-size:24px;
  font-weight:800;

  color:#fff;
}

.socials{
  position:relative;
  z-index:1;

  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:12px;
}

.socials a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:54px;
  height:54px;

  border-radius:18px;

  background:rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.14);

  color:#fff;

  font-size:24px;

  box-shadow:
    0 12px 28px rgba(0,0,0,.10);

  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease);
}

.socials a:hover{
  transform:translateY(-2px);

  background:rgba(255,135,0,.16);

  border-color:
    rgba(255,135,0,.24);
}

.footer-bottom{
  padding:18px 0 22px;

  border-top:
    1px solid rgba(255,255,255,.08);

  text-align:center;
}

.footer-bottom p{
  margin:0;

  color:rgba(255,255,255,.76);

  font-size:14px;
  line-height:1.7;
}

.footer-bottom a{
  color:#fff;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight:700;
}

/* =========================================================
   TEAM MODAL
   ========================================================= */

.team-modal{
  position:fixed;
  inset:0;

  z-index:1200;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.team-modal.is-open{
  opacity:1;
  visibility:visible;
}

.team-modal-backdrop{
  position:absolute;
  inset:0;

  background:rgba(8,12,24,.58);

  backdrop-filter:blur(8px);
}

.team-modal-dialog{
  position:relative;
  z-index:1;

  width:min(980px,100%);

  overflow:hidden;

  background:#fff;

  border-radius:30px;

  box-shadow:
    0 34px 90px rgba(0,0,0,.22);
}

.team-modal-grid{
  display:grid;

  grid-template-columns:
    380px 1fr;

  min-height:540px;
}

.team-modal-media{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px 24px 0;

  background:
    linear-gradient(
      180deg,
      rgba(7,21,139,.07),
      rgba(7,21,139,.02)
    );
}

.team-modal-media img{
  width:100%;
  max-width:320px;
  height:auto;

  object-fit:contain;
}

.team-modal-copy{
  display:flex;
  flex-direction:column;

  gap:16px;

  padding:44px 42px 38px;
}

.team-modal-kicker{
  font-size:12px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--muted);
}

.team-modal-copy h3{
  margin:0;

  font-size:36px;
  line-height:1.04;

  font-weight:800;

  color:var(--text);
}

.team-modal-role{
  margin:0;

  color:var(--mops-blue);

  font-weight:700;
}

.team-modal-quote{
  margin:8px 0 0;
  padding:18px 20px;

  border-left:
    4px solid var(--mops-orange);

  border-radius:16px;

  background:rgba(255,135,0,.05);

  font-size:20px;
  line-height:1.5;

  color:var(--text);
}

.team-modal-text{
  margin:0;

  color:var(--muted);

  line-height:1.8;
}

.team-modal-tags{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:4px;
}

.team-modal-close{
  position:absolute;

  top:18px;
  right:18px;

  width:44px;
  height:44px;

  border:0;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(0,0,0,.12);

  cursor:pointer;
}

body.modal-open{
  overflow:hidden;
}

/* =========================================================
   HELP WIDGET
   ========================================================= */

.help-widget{
  position:fixed;

  right:24px;
  bottom:24px;

  z-index:999;

  display:flex;
  align-items:center;

  gap:14px;

  width:fit-content;
  max-width:420px;

  padding:16px;

  background:rgba(255,255,255,.96);

  border:
    1px solid rgba(255,135,0,.10);

  border-radius:24px;

  box-shadow:
    0 18px 45px rgba(0,0,0,.08);

  backdrop-filter:blur(12px);

  animation:
    floaty 4s ease-in-out infinite;
}

.help-avatar{
  width:58px;
  height:58px;

  padding:10px;

  flex-shrink:0;

  object-fit:contain;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ff8700,
      #ffb347
    );

  box-shadow:
    0 10px 24px rgba(255,135,0,.20);
}

.help-panel{
  display:flex;
  flex-direction:column;

  gap:10px;

  min-width:260px;
}

.help-title{
  font-size:15px;
  font-weight:800;
  line-height:1.2;

  color:#07158b;
}

.help-form{
  display:flex;
  align-items:center;

  gap:10px;
}

.help-input{
  flex:1;

  height:46px;

  padding:0 16px;

  border:none;
  outline:none;

  border-radius:16px;

  background:#f4f7fb;

  font-size:15px;

  color:#0b1220;

  font-family:'avenir_35light',Arial,sans-serif;
}

.help-input::placeholder{
  color:#7d8794;
}

.help-send{
  width:46px;
  height:46px;

  border:none;

  border-radius:14px;

  cursor:pointer;

  font-size:16px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #ff8700,
      #ff9d2f
    );

  box-shadow:
    0 12px 20px rgba(255,135,0,.22);

  transition:.25s ease;
}

.help-send:hover{
  transform:translateY(-2px);
}

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

.reveal,
.section-head,
.hero-copy > *,
.hero-panel,
.solution-card,
.product-suite,
.benefit,
.pricing-row,
.pricing-side,
.company-box,
.values-box,
.team-box,
.cert-box,
.faq-grid details,
.contact-card,
.footer-card,
.logo-row,
.signal-stack,
.hero-proof,
.testimonial-feature,
.testimonial-card,
.metric-card,
.platform-card{
  opacity:0;

  transform:
    translateY(var(--reveal-distance));

  filter:blur(6px);

  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);

  will-change:
    transform,
    opacity,
    filter;
}

.visible,
.section-head.is-visible,
.hero-copy > .is-visible,
.hero-panel.is-visible,
.solution-card.is-visible,
.product-suite.is-visible,
.benefit.is-visible,
.pricing-row.is-visible,
.pricing-side.is-visible,
.company-box.is-visible,
.values-box.is-visible,
.team-box.is-visible,
.cert-box.is-visible,
.faq-grid details.is-visible,
.contact-card.is-visible,
.footer-card.is-visible,
.logo-row.is-visible,
.signal-stack.is-visible,
.hero-proof.is-visible,
.testimonial-feature.is-visible,
.testimonial-card.is-visible,
.metric-card.is-visible,
.platform-card.is-visible{
  opacity:1;

  transform:none;

  filter:blur(0);
}

body.is-loaded .hero-copy > *,
body.is-loaded .hero-panel{
  opacity:1;

  transform:none;

  filter:blur(0);
}

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

@keyframes heroBrandSweep{
  0%{
    transform:
      translateX(-60%)
      rotate(8deg);
  }

  55%{
    transform:
      translateX(55%)
      rotate(8deg);
  }

  100%{
    transform:
      translateX(55%)
      rotate(8deg);
  }
}

@keyframes sweep{
  0%{
    transform:
      translateX(-55%)
      rotate(12deg);
  }

  55%{
    transform:
      translateX(55%)
      rotate(12deg);
  }

  100%{
    transform:
      translateX(55%)
      rotate(12deg);
  }
}

@keyframes floaty{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }
}

@keyframes videoPop{
  0%{
    transform:
      translateY(24px)
      scale(.96);

    box-shadow:
      0 18px 50px rgba(0,0,0,.08);
  }

  55%{
    transform:
      translateY(-14px)
      scale(1.025);

    box-shadow:
      0 46px 120px rgba(7,21,139,.16);
  }

  100%{
    transform:
      translateY(0)
      scale(1);
  }
}

/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1280px){

  .hero,
  .trust-band,
  .usecases-premium,
  .testimonials-premium,
  .platform-enterprise,
  .solutions,
  .showcase,
  .benefits,
  .pricing,
  .company,
  .faq,
  .contact{
    margin-left:32px;
    margin-right:32px;
  }
}

/* =========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   ========================================================= */

@media (max-width:1100px){

  .pricing-grid,
  .company-top,
  .testimonial-grid,
  .platform-grid{
    grid-template-columns:1fr;
  }

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

  .logo-row{
    justify-content:flex-start;
  }

  .nav-links{
    gap:10px;
  }

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

  .product-media{
    min-height:auto;
  }

  .product-media img{
    min-height:240px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:991px){

  .team-grid,
  .contact-grid,
  .benefit-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

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

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    grid-template-columns:1fr;
  }

  .story-row.reverse .story-copy,
  .story-row.reverse .story-visual{
    order:unset;
  }

  .values-grid,
  .product-points{
    grid-template-columns:1fr;
  }

  .hero-claim-wrap{
    flex-direction:column;

    gap:22px;

    padding:30px 24px;

    text-align:center;
  }

  .hero-side-logo{
    width:112px;
    height:112px;

    padding:12px;

    transform:none;
  }

  .hero-claim-wrap h1{
    text-align:center;

    font-size:
      clamp(44px,10vw,68px);
  }

  .nav-links{
    display:none;

    position:absolute;

    top:calc(100% + 8px);

    left:20px;
    right:20px;

    padding:16px;

    border-radius:22px;

    background:#fff;

    border:
      1px solid rgba(9,18,40,.08);

    box-shadow:var(--shadow-lg);

    flex-direction:column;
    align-items:stretch;
  }

  .nav-links.open{
    display:flex;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .nav-cta .btn-primary{
    display:none;
  }

  .team-modal-grid{
    grid-template-columns:1fr;
  }

  .team-modal-copy{
    padding:28px 24px;
  }

  .story-screen video,
  .story-screen img{
    min-height:320px;
  }

  .hero-proof blockquote{
    font-size:28px;
  }

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

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

@media (max-width:767px){

  :root{
    --nav-h:60px;
  }

  body{
    padding-top:60px;

    line-height:1.55;
  }

  section{
    padding:52px 0;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .hero,
  .trust-band,
  .usecases-premium,
  .testimonials-premium,
  .platform-enterprise,
  .solutions,
  .showcase,
  .benefits,
  .pricing,
  .company,
  .faq,
  .contact{
    margin:
      10px 8px 0;

    border-radius:20px;
  }

  /* ---------- Navigation ---------- */

  .brand img{
    width:108px;
  }

  .nav-toggle{
    width:42px;
    height:42px;

    border-radius:12px;
  }

  .nav-links{
    left:10px;
    right:10px;

    padding:12px;

    border-radius:18px;
  }

  .nav-links a{
    padding:9px 12px;

    font-size:13px;
  }

  /* ---------- Section headings ---------- */

  .section-head{
    margin-bottom:32px;
  }

  .section-head h2{
    margin:12px 0 10px;

    font-size:32px;
    line-height:1.08;

    letter-spacing:-.03em;
  }

  .section-head p{
    font-size:15px;
    line-height:1.65;
  }

  .section-head h2::after{
    width:54px;
    height:3px;

    margin-top:14px;
  }

  .eyebrow{
    gap:7px;

    padding:7px 11px;

    font-size:10px;
  }

  /* ---------- Hero ---------- */

  .hero{
    padding:30px 0 40px;
  }

  .hero-grid{
    gap:24px;
  }

  .hero-claim-wrap{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:14px;

    margin:18px auto;
    padding:20px 14px;

    border-radius:22px;
  }

  .hero-side-logo{
    width:64px;
    height:64px;

    padding:8px;
  }

  .hero-copy h1{
    margin:12px 0;
  }

  .hero-brand{
    margin-bottom:10px;

    font-size:38px;
  }

  .hero-title,
  .hero-claim-wrap h1{
    font-size:34px;
    line-height:1;

    text-align:center;
  }

  .hero-intro,
  .hero-copy p{
    font-size:15px;
    line-height:1.65;
  }

  .hero-subline{
    gap:6px;

    margin:16px 0 18px;
  }

  .hero-subline span{
    padding:6px 9px;

    border-radius:9px;

    font-size:12px;
  }

  .hero-stats{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;

    margin-top:20px;
  }

  .stat{
    padding:16px 14px;

    border-radius:18px;
  }

  .stat strong{
    margin-bottom:6px;

    font-size:21px;
  }

  .stat span{
    font-size:13px;
    line-height:1.5;
  }

  .hero-proof{
    padding:16px 14px;

    border-radius:20px;
  }

  .hero-proof blockquote{
    font-size:21px;
    line-height:1.35;
  }

  .hero-proof p{
    margin-top:9px;

    font-size:12px;
  }

  .hero-panel{
    padding:10px;

    border-radius:22px;
  }

  .hero-screen{
    padding:12px;

    border-radius:18px;
  }

  .signal-stack{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .signal-card{
    margin-bottom:0;

    padding:15px;

    border-radius:17px;
  }

  .signal-card h3{
    gap:9px;

    margin-bottom:7px;

    font-size:16px;
  }

  .signal-card p{
    font-size:14px;
    line-height:1.55;
  }

  .signal-number{
    width:28px;
    height:28px;
    min-width:28px;

    font-size:13px;
  }

  /* ---------- Tags ---------- */

  .tag-list{
    gap:6px;

    margin-top:10px;
  }

  .tag,
  .logo-chip,
  .security-pill,
  .team-modal-tags span{
    padding:6px 9px;

    border-radius:9px;

    font-size:11px;
  }

  /* ---------- Benefits ---------- */

  .benefit-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .benefit{
    padding:17px 14px;

    border-radius:18px;
  }

  .benefit strong{
    margin-bottom:6px;

    font-size:25px;
  }

  .benefit span{
    font-size:13px;
    line-height:1.55;
  }

  /* ---------- Solutions ---------- */

  .solution-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .solution-top{
    padding:17px 16px;
  }

  .solution-top h3{
    font-size:20px;
  }

  .solution-top p{
    margin-top:6px;

    font-size:14px;
    line-height:1.55;
  }

  .solution-body{
    padding:16px;
  }

  .solution-body p,
  .solution-body li{
    font-size:14px;
    line-height:1.6;
  }

  .solution-body ul{
    gap:8px;

    margin-top:14px;
  }

  .logo-row{
    justify-content:center;

    gap:8px;
  }

  /* ---------- Story / usecases ---------- */

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    display:grid;

    grid-template-columns:
      minmax(0,1fr) !important;

    gap26px;

    margin:56px 0;
  }

  .story-row.reverse .story-copy,
  .story-row.reverse .story-visual{
    order:unset;
  }

  .story-copy,
  .story-visual{
    width:100%;

    min-width:0;
    max-width:none;
  }

  .story-row:not(.story-row-wide) .story-visual{
    max-width:none;
  }

  .story-number{
    margin-bottom:8px;

    font-size:11px;
  }

  .story-kicker{
    margin-bottom:9px;

    font-size:12px;
  }

  .story-copy h3{
    margin-bottom:14px;

    font-size:30px;
    line-height:1.08;
  }

  .story-copy p{
    margin-bottom:18px;

    font-size:15px;
    line-height:1.65;
  }

  .story-copy ul{
    gap:9px;
  }

  .story-copy li{
    padding-left:21px;

    font-size:14px;
    line-height:1.55;
  }

  .story-copy li::before{
    width:8px;
    height:8px;

    top:7px;
  }

  .story-screen{
    padding:10px;

    border-radius:20px;
  }

  .story-screen-inner{
    border-radius:15px;
  }

  .story-screen video,
  .story-screen img,
  .story-row-wide:not(.story-desktop) .story-screen video,
  .story-row-wide:not(.story-desktop) .story-screen img{
    width:100%;

    min-height:0;

    border-radius:15px;
  }

  .story-desktop .story-screen-inner{
    width:100%;

  }

  /* ---------- Products ---------- */

  .product-stack{
    gap:16px;
  }

  .product-suite,
  .horizontal-suite{
    display:grid;

    grid-template-columns:
      minmax(0,1fr) !important;

    padding:14px;

    gap:15px;

    border-radius:20px;
  }

  .product-media{
    padding:10px;

    min-height:0;

    border-radius:18px;
  }

  .product-media img{
    min-height:0;

    border-radius:14px;
  }

  .product-copy{
    gap:10px;
  }

  .product-kicker{
    padding:6px 9px;

    font-size:10px;
  }

  .product-copy h3{
    font-size:26px;
  }

  .product-copy p{
    font-size:14px;
    line-height:1.65;
  }

  .product-points{
    display:grid;

    grid-template-columns:1fr;

    gap:8px;
  }

  .product-points li{
    padding:
      10px 10px 10px 28px;

    border-radius:13px;

    font-size:13px;
    line-height:1.5;
  }

  .product-points li::before{
    left:11px;
    top:15px;

    width:7px;
    height:7px;
  }

  .product-note{
    padding:11px 12px;

    border-radius:13px;

    font-size:13px;
    line-height:1.55;
  }

  .horizontal-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  /* ---------- Testimonials ---------- */

  .testimonial-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .testimonial-feature{
    margin-bottom:26px;

    padding:22px 17px;

    border-radius:20px;
  }

  .testimonial-feature blockquote{
    font-size:22px;
    line-height:1.35;
  }

  .testimonial-card{
    padding:18px 16px;

    border-radius:20px;
  }

  .testimonial-icon{
    width:46px;
    height:46px;

    margin-bottom:12px;

    border-radius:14px;

    font-size:18px;
  }

  .testimonial-card blockquote{
    font-size:15px;
    line-height:1.6;
  }

  /* ---------- Platform ---------- */

  .platform-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .platform-card{
    padding:18px 16px;

    border-radius:20px;
  }

  .platform-kicker{
    margin-bottom:10px;

    padding:6px 9px;

    font-size:10px;
  }

  .platform-card h3{
    margin-bottom:7px;

    font-size:21px;
  }

  .platform-card p{
    font-size:14px;
    line-height:1.62;
  }

  .platform-pill-row{
    gap:6px;

    margin-top:12px;
  }

  /* ---------- Metrics ---------- */

  .metrics-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .metric-card{
    padding:18px 14px;

    border-radius:18px;
  }

  .metric-value{
    font-size:27px;
  }

  .metric-label{
    font-size:13px;
  }

  /* ---------- Pricing ---------- */

  .pricing-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:14px;
  }

  .pricing-side{
    padding:18px 16px;

    border-radius:20px;
  }

  .pricing-side h3{
    font-size:23px;
  }

  .pricing-side p{
    margin-bottom:14px;

    font-size:14px;
    line-height:1.6;
  }

  .pricing-points{
    gap:7px;
  }

  .pricing-points div{
    padding:10px 11px;

    border-radius:12px;

    font-size:13px;
  }

  /* ---------- Company ---------- */

  .company-top{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .company-box,
  .values-box,
  .cert-box{
    padding:18px 16px;

    border-radius:20px;
  }

  .company-box h3,
  .values-box h3,
  .team-box h3,
  .cert-box h3{
    margin-bottom:8px;

    font-size:21px;
  }

  .company-box p,
  .values-box p{
    font-size:14px;
    line-height:1.62;
  }

  .company-list{
    gap:7px;

    margin-top:13px;
  }

  .company-list li,
  .value-pill{
    padding:
      10px 11px 10px 31px;

    border-radius:12px;

    font-size:13px;
    line-height:1.5;
  }

  .values-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:8px;

    margin-top:13px;
  }

  .team-box{
    margin-top:14px;

    padding:16px;

    border-radius:20px;
  }

  .team-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .member{
    padding:14px 10px;

    border-radius:18px;
  }

  .member img{
    width:68px;
    height:68px;

    border-width:4px;
  }

  .member h3{
    margin:9px 0 4px;

    font-size:16px;
  }

  .member p{
    font-size:12px;
    line-height:1.45;
  }

  .cert-box{
    margin-top:14px;
  }

  .cert-row{
    gap:10px;

    margin-top:12px;
  }

  .cert-row img{
    max-height:66px;
  }

  /* ---------- FAQ ---------- */

  .faq-box{
    padding:10px;

    border-radius:20px;
  }

  .faq-grid{
    gap:8px;
  }

  details{
    padding:0 11px;

    border-radius:15px;
  }

  summary{
    gap:10px;

    padding:15px 2px;

    font-size:15px;
    line-height:1.35;
  }

  details p{
    margin-bottom:14px;

    font-size:14px;
    line-height:1.6;
  }

  /* ---------- Contact ---------- */

  .contact-box{
    padding:16px;

    border-radius:20px;
  }

  .contact-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:9px;

    margin-bottom:12px;
  }

  /*
   * Keep icon + text horizontal.
   */
  .contact-card{
    display:flex;

    flex-direction:row;

    align-items:center;

    gap:11px;

    padding:13px;

    border-radius:16px;
  }

  .contact-icon{
    flex:0 0 auto;

    width:42px;
    height:42px;

    border-radius:13px;

    font-size:17px;
  }

  .contact-card h3{
    margin-bottom:3px;

    font-size:14px;
  }

  .contact-card p,
  .contact-card a{
    font-size:13px;
    line-height:1.5;
  }

  .contact-actions{
    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:8px;
  }

  /* ---------- Buttons ---------- */

  .btn{
    width:100%;

    padding:12px 16px;

    font-size:14px;
  }

  /* ---------- Footer ---------- */

  footer{
    padding-top:40px;
  }

  .footer-card{
    margin-bottom:22px;

    padding:18px;

    border-radius:20px;
  }

  .footer-card h3{
    margin-bottom:10px;

    font-size:20px;
  }

  .socials{
    gap:8px;
  }

  .socials a{
    width:46px;
    height:46px;

    border-radius:14px;

    font-size:20px;
  }

  /* ---------- Team modal ---------- */

  .team-modal{
    padding:12px;
  }

  .team-modal-dialog{
    border-radius:20px;
  }

  .team-modal-grid{
    display:grid;

    grid-template-columns:1fr;

    min-height:0;
  }

  .team-modal-media{
    padding:18px 18px 0;
  }

  .team-modal-media img{
    max-width:220px;
  }

  .team-modal-copy{
    gap:11px;

    padding:20px 17px;
  }

  .team-modal-copy h3{
    font-size:27px;
  }

  .team-modal-quote{
    padding:13px 14px;

    font-size:16px;
  }

  .team-modal-text{
    font-size:14px;
    line-height:1.6;
  }

  /* ---------- Help widget ---------- */

  .help-widget{
    left:10px;
    right:10px;
    bottom:10px;

    width:auto;
    max-width:none;

    flex-direction:column;

    align-items:stretch;

    gap:9px;

    padding:10px;

    border-radius:18px;
  }

  .help-avatar{
    width:46px;
    height:46px;

    padding:8px;

    align-self:center;
  }

  .help-panel{
    width:100%;
    min-width:0;
  }

  .help-title{
    font-size:13px;

    text-align:center;
  }

  /*
   * Keep input + send horizontal.
   */
  .help-form{
    display:flex;

    flex-direction:row;

    align-items:center;

    gap:7px;
  }

  .help-input{
    min-width:0;

    height:42px;

    padding:0 12px;

    border-radius:12px;

    font-size:14px;
  }

  .help-send{
    flex:0 0 auto;

    width:42px;
    height:42px;

    border-radius:12px;
  }
}

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

@media (max-width:420px){

  section{
    padding:44px 0;
  }

  .container{
    padding-left:12px;
    padding-right:12px;
  }

  .section-head{
    margin-bottom:26px;
  }

  .section-head h2{
    font-size:28px;
  }

  .section-head p{
    font-size:14px;
  }

  .hero-brand{
    font-size:34px;
  }

  .hero-title,
  .hero-claim-wrap h1{
    font-size:30px;
  }

  .hero-intro,
  .hero-copy p{
    font-size:14px;
  }

  .hero-subline span{
    font-size:11px;
  }

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    margin:44px 0;
  }

  .story-copy h3{
    font-size:27px;
  }

  .story-copy p,
  .story-copy li{
    font-size:14px;
  }

  .product-copy h3{
    font-size:23px;
  }

  .testimonial-feature blockquote{
    font-size:20px;
  }

  .platform-card h3{
    font-size:19px;
  }

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

  .member img{
    width:74px;
    height:74px;
  }

  .help-widget{
    left:6px;
    right:6px;
    bottom:6px;
  }
}

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

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

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

    transition:none !important;

    scroll-behavior:auto !important;
  }

  .reveal,
  .section-head,
  .hero-copy > *,
  .hero-panel,
  .solution-card,
  .product-suite,
  .benefit,
  .pricing-row,
  .pricing-side,
  .company-box,
  .values-box,
  .team-box,
  .cert-box,
  .faq-grid details,
  .contact-card,
  .footer-card,
  .logo-row,
  .signal-stack,
  .hero-proof,
  .testimonial-feature,
  .testimonial-card,
  .metric-card,
  .platform-card{
    opacity:1 !important;

    transform:none !important;

    filter:none !important;
  }
}

/* =========================================================
   RESPONSIVE STORY VISUALS
   ---------------------------------------------------------
   Use one of these classes on .story-visual:

   .story-visual--desktop
   .story-visual--tablet
   .story-visual--phone

   Example:
   <div class="story-visual story-visual--phone">...</div>

   These rules intentionally override the older story sizing
   rules above and remove fixed image/video minimum heights.
   ========================================================= */

/* Keep the story layout fluid instead of tying it to device widths. */
.story-row,
.story-row-wide,
.story-row-wide.story-desktop{
  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);

  gap:clamp(36px, 5.5vw, 92px);

  align-items:center;
}

.story-row.reverse,
.story-row-wide.reverse{
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, .92fr);
}

/* The row remains responsible only for ordering. */
.story-row.reverse .story-copy{
  order:2;
}

.story-row.reverse .story-visual{
  order:1;
}

/* Visual column always consumes the available grid column. */
.story-visual,
.story-desktop .story-visual,
.story-row:not(.story-row-wide) .story-visual{
  width:100%;
  min-width:0;
  max-width:none;

  display:flex;
  align-items:center;
  justify-content:center;

  justify-self:stretch;

  transform-style:preserve-3d;
}

/* Base frame. */
.story-screen{
  max-width:100%;
}

/*
 * Screenshots should retain their original colours.
 * The old ::before layer added orange + dark/blue tinting.
 */
.story-screen-inner::before{
  display:none;
}

/* Do not force screenshots/videos to a common height or crop them. */
.story-screen video,
.story-screen img,
.story-row-wide:not(.story-desktop) .story-screen video,
.story-row-wide:not(.story-desktop) .story-screen img,
.story-row:not(.story-row-wide) .story-screen video,
.story-row:not(.story-row-wide) .story-screen img,
.story-desktop .story-screen video,
.story-desktop .story-screen img{
  display:block;

  width:auto;
  max-width:100%;

  height:auto;
  min-height:0;
  max-height:none;

  object-fit:contain;

  background:transparent;
}

/* ---------------------------------------------------------
   DESKTOP / LANDSCAPE APPLICATION SCREEN
   --------------------------------------------------------- */

.story-visual--desktop .story-screen{
  width:100%;
}

.story-visual--desktop .story-screen-inner{
  width:100%;
}

.story-visual--desktop .story-screen img,
.story-visual--desktop .story-screen video{
  width:100%;
  height:auto;

  max-width:100%;
  max-height:none;
}

/* ---------------------------------------------------------
   TABLET / PORTRAIT OR NEAR-PORTRAIT APPLICATION SCREEN
   --------------------------------------------------------- */

.story-visual--tablet .story-screen{
  width:fit-content;
  max-width:100%;
}

.story-visual--tablet .story-screen-inner{
  width:fit-content;
  max-width:100%;
}

.story-visual--tablet .story-screen img,
.story-visual--tablet .story-screen video{
  width:auto;
  max-width:100%;

  height:auto;
  max-height:clamp(440px, 55vw, 680px);

  margin-inline:auto;
}

/* ---------------------------------------------------------
   PHONE / NARROW PORTRAIT APPLICATION SCREEN
   --------------------------------------------------------- */

.story-visual--phone .story-screen{
  width:fit-content;
  max-width:100%;
}

.story-visual--phone .story-screen-inner{
  width:fit-content;
  max-width:100%;
}

.story-visual--phone .story-screen img,
.story-visual--phone .story-screen video{
  width:auto;
  max-width:100%;

  height:auto;
  max-height:clamp(420px, 50vw, 620px);

  margin-inline:auto;
}

/*
 * Retain the subtle outer CI glow.
 * It stays behind the screenshot and therefore does not tint the UI.
 */
.story-screen.orange::after{
  background:#ff8700;
  opacity:.10;
}

.story-screen.blue::after{
  background:#1023b8;
  opacity:.10;
}

/* Keep hover enlargement restrained for UI screenshots. */
.story-row:hover .story-screen img{
  transform:scale(1.015);

  filter:
    saturate(1.02)
    contrast(1.01);
}


/* =========================================================
   RESPONSIVE STORY LAYOUT — TABLET
   ========================================================= */

@media (max-width:991px){

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:32px;

    margin:72px 0;
  }

  /*
   * On stacked layouts we keep a predictable reading sequence:
   * text first, visual second.
   */
  .story-row.reverse .story-copy,
  .story-row.reverse .story-visual{
    order:unset;
  }

  .story-copy,
  .story-visual{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .story-visual{
    justify-self:stretch;
  }

  .story-visual--desktop .story-screen{
    width:100%;
  }

  .story-visual--tablet .story-screen img,
  .story-visual--tablet .story-screen video{
    max-height:min(64vh, 620px);
  }

  .story-visual--phone .story-screen img,
  .story-visual--phone .story-screen video{
    max-height:min(62vh, 560px);
  }
}


/* =========================================================
   RESPONSIVE STORY LAYOUT — MOBILE
   ========================================================= */

@media (max-width:767px){

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    gap:24px;

    margin:52px 0;
  }

  .story-screen{
    padding:8px;

    border-radius:18px;
  }

  .story-screen-inner{
    border-radius:12px;
  }

  .story-screen img,
  .story-screen video{
    border-radius:12px;
  }

  .story-screen::after{
    width:190px;
    height:190px;

    top:-65px;
    right:-65px;

    filter:blur(70px);
  }

  .story-visual--desktop .story-screen,
  .story-visual--desktop .story-screen-inner,
  .story-visual--desktop img,
  .story-visual--desktop video{
    width:100%;
  }

  .story-visual--tablet .story-screen img,
  .story-visual--tablet .story-screen video{
    max-height:min(66vh, 520px);
  }

  .story-visual--phone .story-screen img,
  .story-visual--phone .story-screen video{
    max-height:min(64vh, 480px);
  }

  /*
   * Mouse hover has little meaning on touch devices.
   * Avoid unnecessary zooming if a browser synthesises hover.
   */
  .story-row:hover .story-screen{
    transform:none;
  }

  .story-row:hover .story-screen-inner{
    transform:none;
  }

  .story-row:hover .story-screen img{
    transform:none;
    filter:none;
  }
}


/* =========================================================
   RESPONSIVE STORY LAYOUT — VERY SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    gap:20px;

    margin:44px 0;
  }

  .story-screen{
    padding:6px;

    border-radius:16px;
  }

  .story-screen-inner,
  .story-screen img,
  .story-screen video{
    border-radius:10px;
  }

  .story-visual--tablet .story-screen img,
  .story-visual--tablet .story-screen video{
    max-height:min(62vh, 460px);
  }

  .story-visual--phone .story-screen img,
  .story-visual--phone .story-screen video{
    max-height:min(60vh, 430px);
  }
}

@charset "utf-8";
/* CSS Document */
:root{
  --mops-blue:#07158b;
  --mops-blue-2:#1023b8;
  --mops-orange:#ff8700;
  --mops-orange-soft:#ffb15a;

  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#fbfcfe;
  --surface-3:#f8fbff;

  --text:#0b1220;
  --muted:#5f6b7a;
  --line:rgba(9,18,40,.09);

  --shadow-xs:0 8px 20px rgba(0,0,0,.04);
  --shadow-sm:0 14px 34px rgba(0,0,0,.06);
  --shadow-md:0 24px 64px rgba(0,0,0,.10);
  --shadow-lg:0 36px 110px rgba(0,0,0,.15);

  --radius-xxl:42px;
  --radius-xl:34px;
  --radius-lg:28px;
  --radius-md:22px;
  --radius-sm:16px;

  --container:1440px;
  --nav-h:82px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);

  --reveal-distance:26px;
  --reveal-duration:.85s;
  --reveal-ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   FONT
   ========================================================= */

@font-face{
  font-family:'avenir_35light';
  src:
    url('fonts/ael___-webfont.woff2') format('woff2'),
    url('fonts/ael___-webfont.woff') format('woff');
  font-weight:400;
  font-style:normal;
}

/* =========================================================
   BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-top:var(--nav-h);

  font-family:'avenir_35light',Arial,sans-serif;
  color:var(--text);

  background:
    radial-gradient(
      1200px 620px at 0% 0%,
      rgba(16,35,184,.04),
      transparent 55%
    ),
    radial-gradient(
      900px 540px at 100% 20%,
      rgba(255,135,0,.03),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #f4f7fb 100%
    );

  line-height:1.65;
  letter-spacing:.01em;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;

  pointer-events:none;
  z-index:-1;

  opacity:.045;

  background-image:
    radial-gradient(
      circle at 1px 1px,
      rgba(7,21,139,.14) 1px,
      transparent 0
    );

  background-size:24px 24px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.35),
      transparent 60%
    );
}

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

a{
  text-decoration:none;
  color:var(--mops-blue);
}

a:hover{
  color:var(--mops-orange);
}

section{
  position:relative;
  padding:120px 0;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
summary,
.btn,
.nav-links a,
.eyebrow,
.stat strong,
.tag,
.logo-chip,
.story-kicker,
.story-number,
.quote-kicker,
.testimonial-source,
.story-quote-source,
.metric-label,
.metric-value,
.platform-kicker,
.platform-card h3,
.contact-card h3,
.footer-card h3,
.member h3,
.team-modal-kicker,
.team-modal-role,
.team-modal-tags span,
.help-title,
.product-kicker,
.security-pill,
.trust-line{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6{
  margin-top:0;
  letter-spacing:-.04em;
  font-weight:780;
  line-height:1.04;
}

p,
li,
span,
input,
textarea,
label,
blockquote{
  font-family:'avenir_35light',Arial,sans-serif;
}

/* =========================================================
   GENERIC SECTION HEAD
   ========================================================= */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;

  border-radius:999px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);

  color:rgba(255,255,255,.9);

  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12);

  backdrop-filter:blur(10px);
}

.eyebrow.light{
  background:rgba(7,21,139,.045);
  border-color:rgba(7,21,139,.08);
  color:var(--mops-blue);
  box-shadow:none;
}

.section-head{
  text-align:center;
  max-width:980px;
  margin:0 auto 52px;
}

.section-head h2{
  margin:18px 0 14px;

  font-size:clamp(38px,4vw,68px);
  line-height:1.02;

  color:var(--text);
}

.section-head p{
  margin:0;

  font-size:18px;
  line-height:1.85;

  color:var(--muted);
}

.section-head h2::after{
  content:"";

  display:block;

  width:76px;
  height:4px;

  margin:18px auto 0;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb868,
      #ff8700
    );

  box-shadow:
    0 10px 24px rgba(255,135,0,.16);
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

header{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:1000;

  height:var(--nav-h);

  background:rgba(255,255,255,.74);

  backdrop-filter:
    blur(22px)
    saturate(180%);

  border-bottom:
    1px solid rgba(255,255,255,.55);

  box-shadow:
    0 10px 32px rgba(0,0,0,.04);
}

.nav-wrap{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.brand{
  display:flex;
  align-items:center;

  gap:14px;

  color:var(--text);
}

.brand img{
  width:138px;
  height:auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:12px;

  flex-wrap:nowrap;
}

.nav-links a{
  padding:10px 14px;

  border-radius:999px;

  white-space:nowrap;

  font-size:14px;
  font-weight:700;

  color:rgba(11,18,32,.82);

  transition:
    all .28s var(--ease);
}

.nav-links a:hover,
.nav-links a.active{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #ffab49,
      #ff8700
    );

  box-shadow:
    0 10px 22px rgba(255,135,0,.18);

  transform:translateY(-1px);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-toggle{
  display:none;

  width:46px;
  height:46px;

  border-radius:14px;

  border:
    1px solid rgba(10,20,40,.10);

  background:#fff;
  color:var(--text);

  font-size:20px;

  box-shadow:var(--shadow-xs);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:14px 22px;

  border-radius:999px;
  border:1px solid transparent;

  font-weight:800;

  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease),
    opacity .28s var(--ease);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );

  color:#111;

  box-shadow:
    0 18px 35px rgba(255,135,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-secondary{
  background:rgba(255,255,255,.08);

  border-color:rgba(255,255,255,.18);

  color:#fff;

  backdrop-filter:blur(10px);
}

.btn-secondary:hover{
  color:#fff;

  background:rgba(255,255,255,.12);

  border-color:rgba(255,255,255,.24);
}

/* =========================================================
   SHARED SECTION SHELL
   ========================================================= */

.hero,
.trust-band,
.usecases-premium,
.testimonials-premium,
.platform-enterprise,
.solutions,
.showcase,
.benefits,
.pricing,
.company,
.faq,
.contact{
  margin:18px 120px 0;

  border-radius:42px;

  overflow:hidden;

  box-shadow:
    0 26px 80px rgba(0,0,0,.05);

  border:
    1px solid rgba(255,255,255,.62);
}

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

.hero{
  position:relative;

  padding:42px 0 108px;

  color:#fff;

  background:
    radial-gradient(
      900px 500px at 12% 18%,
      rgba(18,44,214,.24),
      transparent 58%
    ),
    radial-gradient(
      760px 420px at 82% 12%,
      rgba(255,135,0,.12),
      transparent 52%
    ),
    radial-gradient(
      900px 400px at 50% 120%,
      rgba(255,255,255,.06),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      #06137a 0%,
      #03081b 100%
    );

  box-shadow:
    0 26px 80px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05);

  isolation:isolate;
}

.hero-grid{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:34px;

  margin:0 auto;
}

.hero-copy,
.hero-panel{
  width:100%;
  min-width:0;
}

.hero-copy{
  text-align:center;
}

.hero-copy h1{
  margin:18px 0;

  font-size:clamp(54px,6vw,98px);
  line-height:.98;

  color:#fff;
}

.logomo{
  font-family:'avenir_35light',Arial,sans-serif;
  font-weight:300;
}

.claimmo{
  font-family:'avenir_35light',Arial,sans-serif;
  font-weight:300;
  text-transform:lowercase;
}

.logops{
  color:var(--mops-orange);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight:700;
}

.mops-meaning{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  opacity:.88;
}

.hero-intro{
  margin:0 auto 22px;

  max-width:920px;

  font-size:20px;
  line-height:1.85;

  color:rgba(255,255,255,.84);
}

.hero-brand{
  display:block;

  margin-bottom:18px;

  font-size:clamp(38px,7vw,96px);
  line-height:.9;
}

.hero-title{
  display:block;

  font-size:clamp(42px,4.5vw,74px);
  line-height:1;

  letter-spacing:-.05em;
}

.hero-claim-wrap{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:44px;

  margin:28px auto 24px;
  padding:40px 46px;

  border-radius:36px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.03)
    );

  backdrop-filter:blur(18px);

  box-shadow:
    0 26px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.12);

  overflow:hidden;
}

.hero-claim-wrap::before{
  content:"";

  position:absolute;
  inset:-35%;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,.09) 50%,
      transparent 60%
    );

  transform:
    translateX(-60%)
    rotate(8deg);

  animation:
    heroBrandSweep 10s linear infinite;

  pointer-events:none;
}

.hero-claim-wrap::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-120px;
  top:-160px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,135,0,.10),
      transparent 68%
    );

  pointer-events:none;
}

.hero-claim-wrap h1{
  position:relative;
  z-index:2;

  margin:0;

  text-align:left;

  color:#fff;
}

.hero-side-logo{
  position:relative;
  z-index:2;

  flex:0 0 auto;

  display:block;

  width:228px;
  height:228px;

  margin:0 auto;
  padding:20px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.20),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:
    0 22px 54px rgba(0,0,0,.20),
    0 14px 32px rgba(255,135,0,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-subline{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin:22px 0 24px;
}

.hero-subline span{
  padding:8px 13px;

  border-radius:12px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:14px;
  font-weight:700;

  color:#fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-copy p{
  margin:0 auto;

  max-width:1040px;

  font-size:20px;
  line-height:1.9;

  color:rgba(255,255,255,.84);
}

.trust-line{
  display:inline-flex;
  align-items:center;

  gap:10px;

  margin-top:22px;
  padding:10px 16px;

  border-radius:999px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  color:#fff;

  font-size:14px;
  font-weight:700;
}

.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:14px;

  margin-top:28px;
}

.hero-stats{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;

  margin-top:30px;

  width:100%;
}

.stat{
  padding:22px 20px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.05)
    );

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 30px rgba(0,0,0,.10);

  backdrop-filter:blur(10px);
}

.stat strong{
  display:block;

  margin-bottom:8px;

  font-size:28px;
  line-height:1;
  font-weight:800;

  color:#fff;
}

.stat span{
  font-size:14px;
  line-height:1.6;

  color:rgba(255,255,255,.76);
}

.hero-proof{
  position:relative;

  width:100%;
  max-width:1100px;

  margin:8px auto 0;
  padding:24px 26px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.07)
    );

  border:
    1px solid rgba(255,255,255,.14);

  box-shadow:
    0 24px 60px rgba(0,0,0,.12);

  backdrop-filter:blur(14px);

  text-align:center;
}

.hero-proof .quote-kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  margin-bottom:10px;
  padding:7px 12px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:#fff;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.14);
}

.hero-proof blockquote{
  margin:0;

  font-size:clamp(24px,2.8vw,40px);
  line-height:1.28;

  color:#fff;

  font-weight:700;
}

.hero-proof p{
  margin:12px 0 0;

  font-size:14px;
  line-height:1.6;

  color:rgba(255,255,255,.76);
}

.hero-panel{
  position:relative;

  margin-top:8px;
  padding:18px;

  border-radius:32px;

  background:rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:var(--shadow-lg);

  backdrop-filter:blur(14px);
}

.hero-screen{
  position:relative;
  z-index:1;

  padding:20px;

  border-radius:26px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.93),
      rgba(255,255,255,.84)
    );

  color:var(--text);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6);
}

.signal-stack{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;
}

.signal-card{
  margin-bottom:14px;
  padding:20px;

  border-radius:22px;

  background:#fff;

  border:
    1px solid rgba(9,18,40,.08);

  box-shadow:
    0 12px 28px rgba(7,21,139,.05);

  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease);
}

.signal-card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 34px rgba(7,21,139,.08);

  border-color:
    rgba(255,135,0,.14);
}

.signal-card h3{
  display:flex;
  align-items:center;

  gap:12px;

  margin:0 0 10px;

  font-size:19px;
  line-height:1.24;

  font-weight:800;

  color:var(--text);
}

.signal-card p{
  margin:0;

  color:var(--muted);

  font-size:15px;
  line-height:1.72;
}

.signal-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;
  min-width:34px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ffbf74 0%,
      #ff8c10 100%
    );

  color:#fff;

  font-size:15px;
  font-weight:800;

  box-shadow:
    0 10px 20px rgba(255,135,0,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}

/* =========================================================
   TAGS / PILLS
   ========================================================= */

.tag-list{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:14px;
}

.tag,
.logo-chip,
.security-pill,
.team-modal-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  border-radius:12px;

  background:rgba(7,21,139,.035);

  border:
    1px solid rgba(7,21,139,.07);

  font-size:13px;
  font-weight:700;

  color:rgba(11,18,32,.74);

  cursor:default;
}

/* =========================================================
   TRUST
   ========================================================= */

.trust-band{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );

  padding:44px 0;
}

.trust-band-wrap{
  display:grid;

  gap:22px;

  text-align:center;
}

.trust-band h3{
  margin:0;

  font-size:28px;
  line-height:1.15;

  color:var(--text);
}

.logo-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:14px;
}

.logo-chip{
  padding:12px 16px;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 12px 28px rgba(7,21,139,.05);

  font-size:14px;
}

.metrics-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;

  margin-top:12px;
}

.metric-card{
  padding:24px 20px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fcfdff
    );

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 16px 42px rgba(7,21,139,.05);

  text-align:center;
}

.metric-value{
  display:block;

  margin-bottom:10px;

  font-size:34px;
  line-height:1;

  font-weight:800;

  color:var(--mops-blue);
}

.metric-label{
  display:block;

  font-size:15px;
  line-height:1.65;

  font-weight:700;

  color:var(--muted);
}

/* =========================================================
   STORY / USE CASES
   ========================================================= */

.usecases-premium{
  background:
    radial-gradient(
      circle at top left,
      rgba(7,21,139,.04),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(255,135,0,.04),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #ffffff 100%
    );
}

.story-row{
  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:80px;

  align-items:center;

  margin:120px 0;

  perspective:1400px;
}

.story-row.reverse{
  grid-template-columns:.8fr 1.2fr;
}

.story-row.reverse .story-copy{
  order:2;
}

.story-row.reverse .story-visual{
  order:1;
}

.story-row-wide{
  grid-template-columns:1.2fr .8fr;
}

.story-row-wide.reverse{
  grid-template-columns:.8fr 1.2fr;
}

.story-row-wide.story-desktop{
  grid-template-columns:.72fr 1.58fr;

  gap:92px;
}

.story-desktop .story-visual{
  width:100%;
  max-width:none;
}

.story-number{
  display:block;

  margin-bottom:14px;

  color:var(--mops-orange);

  font-size:13px;
  font-weight:800;

  letter-spacing:.18em;
}

.story-kicker{
  display:block;

  margin-bottom:14px;

  color:var(--mops-blue);

  font-size:14px;
  font-weight:800;
}

.story-copy{
  transition:
    transform .65s var(--ease-soft);
}

.story-copy h3{
  margin:0 0 20px;

  font-size:clamp(34px,4vw,66px);
}

.story-copy p{
  margin-bottom:26px;

  color:var(--muted);

  font-size:19px;
  line-height:1.85;
}

.story-copy ul{
  display:grid;

  gap:12px;

  list-style:none;

  padding:0;
  margin:0;
}

.story-copy li{
  position:relative;

  padding-left:26px;

  color:#344050;

  font-weight:600;
}

.story-copy li::before{
  content:"";

  position:absolute;

  left:0;
  top:8px;

  width:10px;
  height:10px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ffb867,
      #ff8700
    );
}

.story-visual{
  width:100%;

  justify-self:center;

  transform-style:preserve-3d;
}

.story-row:not(.story-row-wide) .story-visual{
}

.story-screen{
  position:relative;

  padding:18px;

  border-radius:34px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbff
    );

  border:
    1px solid var(--line);

  box-shadow:
    0 30px 90px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.72);

  overflow:hidden;

  transition:
    transform .75s var(--ease-soft),
    box-shadow .75s var(--ease-soft),
    border-color .45s var(--ease);
}

.story-screen::before{
  content:"";

  position:absolute;
  inset:-40%;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,.45) 50%,
      transparent 60%
    );

  transform:
    translateX(-50%)
    rotate(10deg);

  animation:
    sweep 9s linear infinite;

  pointer-events:none;

  z-index:3;
}

.story-screen::after{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  top:-80px;
  right:-80px;

  border-radius:50%;

  filter:blur(85px);

  opacity:.18;

  pointer-events:none;

  z-index:1;
}

.story-screen.orange::after{
  background:#ff8700;
}

.story-screen.blue::after{
  background:#1023b8;
}

.story-screen-inner{
  position:relative;
  z-index:2;

  border-radius:24px;

  overflow:hidden;

  transform:translateZ(0);

  transition:
    transform .8s var(--ease-soft),
    filter .8s var(--ease-soft);
}

.story-screen-inner::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:4;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,135,0,.18),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(7,21,139,.22),
      rgba(2,8,20,.10)
    );

  opacity:1;

  transition:
    opacity .7s var(--ease-soft);

  pointer-events:none;
}

.story-screen video,
.story-screen img{
  width:100%;

  border-radius:24px;

  min-height:480px;

  object-fit:cover;

  transform:scale(1.01);

  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    filter 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.story-screen video{
  opacity:0;

  filter:
    blur(10px)
    brightness(.45)
    saturate(.8);

  transform:scale(1.04);
}

.story-row.video-active .story-screen video{
  opacity:1;

  filter:
    blur(0)
    brightness(1)
    saturate(1);

  transform:scale(1);
}

.story-row.video-active .story-screen-inner::before{
  opacity:0;
}

.story-row.video-active .story-screen{
  animation:
    videoPop .85s var(--ease-soft) both;
}

.story-row-wide:not(.story-desktop) .story-screen video,
.story-row-wide:not(.story-desktop) .story-screen img{
  min-height:560px;
}

.story-row:not(.story-row-wide) .story-screen video,
.story-row:not(.story-row-wide) .story-screen img{
  object-fit:contain;

  background:#f8fbff;
}

.story-desktop .story-screen-inner{
  width:100%;
}

.story-desktop .story-screen video,
.story-desktop .story-screen img{
  width:100%;

  min-height:0;

  object-fit:cover;
}

.story-screen.is-tilting{
  will-change:transform;
}

.story-row:hover .story-screen{
  transform:
    translateY(-12px)
    scale(1.012);

  box-shadow:
    0 42px 110px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.8);

  border-color:
    rgba(255,135,0,.14);
}

.story-row:hover .story-screen-inner{
  transform:
    translateY(-4px)
    scale(1.01);
}

.story-row:hover .story-screen img{
  transform:
    scale(1.035);

  filter:
    saturate(1.04)
    contrast(1.02);
}

.story-row:hover .story-copy{
  transform:translateY(-4px);
}

.story-quote{
  margin-top:24px;

  padding:18px 18px 16px;

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f9fbff
    );

  border:
    1px solid rgba(9,18,40,.08);

  box-shadow:
    0 16px 36px rgba(7,21,139,.05);
}

.story-quote.compact{
  margin-top:22px;

  padding:16px 16px 14px;
}

.story-quote blockquote{
  margin:0;

  color:var(--text);

  font-size:18px;
  line-height:1.62;

  font-weight:700;
}

.story-quote.compact blockquote{
  font-size:17px;
}

.story-quote-source{
  display:block;

  margin-top:10px;

  font-size:13px;
  line-height:1.55;

  color:var(--muted);

  font-weight:700;
}

/* =========================================================
   SHARED CARDS
   ========================================================= */

.testimonial-card,
.platform-card,
.solution-card,
.product-suite,
.benefit,
.member,
details,
.pricing-list,
.pricing-side,
.company-box,
.values-box,
.team-box,
.cert-box,
.faq-box,
.contact-box,
.footer-card{
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fcfdff
    );

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 16px 42px rgba(7,21,139,.05);

  transition:
    transform .32s var(--ease),
    box-shadow .32s var(--ease),
    border-color .32s var(--ease),
    background .32s var(--ease);
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials-premium{
  position:relative;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,135,0,.08),
      transparent 36%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(7,21,139,.06),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #eef4ff 100%
    );
}

.testimonial-feature{
  position:relative;

  max-width:1040px;

  margin:0 auto 40px;
  padding:42px 44px;

  border-radius:34px;

  background:
    linear-gradient(
      160deg,
      #07158b 0%,
      #1023b8 100%
    );

  color:#fff;

  box-shadow:
    0 30px 80px rgba(7,21,139,.18);

  overflow:hidden;
}

.testimonial-feature::before{
  content:"“";

  position:absolute;

  top:-20px;
  left:20px;

  font-size:140px;
  line-height:1;

  font-weight:800;

  color:rgba(255,255,255,.08);
}

.testimonial-feature blockquote{
  position:relative;
  z-index:1;

  margin:0;

  font-size:clamp(24px,3vw,42px);
  line-height:1.28;

  font-weight:700;

  color:#fff;
}

.testimonial-feature .testimonial-source{
  position:relative;
  z-index:1;

  margin-top:14px;

  color:rgba(255,255,255,.8);

  font-size:14px;
  line-height:1.6;
}

.testimonial-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:22px;
}

.testimonial-card{
  padding:26px 24px;

  border-radius:28px;
}

.testimonial-card:hover,
.platform-card:hover,
.solution-card:hover,
.product-suite:hover,
.member:hover,
details:hover{
  transform:translateY(-4px);

  box-shadow:
    0 22px 54px rgba(7,21,139,.08);

  border-color:
    rgba(255,135,0,.14);
}

.testimonial-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;

  margin-bottom:18px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );

  color:#111;

  font-size:22px;

  box-shadow:
    0 14px 30px rgba(255,135,0,.20);
}

.testimonial-card blockquote{
  margin:0;

  color:var(--text);

  font-size:18px;
  line-height:1.7;

  font-weight:700;
}

.testimonial-card .testimonial-source{
  display:block;

  margin-top:14px;

  font-size:13px;
  line-height:1.6;

  color:var(--muted);

  font-weight:700;
}

/* =========================================================
   PLATFORM
   ========================================================= */

.platform-enterprise{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );
}

.platform-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:22px;
}

.platform-card{
  padding:26px;

  border-radius:30px;
}

.platform-kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  width:fit-content;

  margin-bottom:14px;
  padding:8px 12px;

  border-radius:999px;

  background:rgba(255,135,0,.08);

  border:
    1px solid rgba(255,135,0,.12);

  color:var(--mops-orange);

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.platform-card h3{
  margin:0 0 10px;

  font-size:26px;
  line-height:1.15;

  font-weight:800;

  color:var(--text);
}

.platform-card p{
  margin:0;

  color:var(--muted);

  line-height:1.82;

  font-size:17px;
}

.platform-pill-row{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:16px;
}

/* =========================================================
   SOLUTIONS
   ========================================================= */

.solutions,
.showcase,
.benefits,
.pricing,
.company,
.faq{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );
}

.solution-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:20px;
}

.solution-top{
  padding:22px 24px;

  background:
    radial-gradient(
      520px 240px at 18% 18%,
      rgba(255,135,0,.10),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(7,21,139,.04),
      rgba(7,21,139,.015)
    );

  border-bottom:
    1px solid rgba(9,18,40,.06);
}

.solution-top h3{
  margin:0;

  font-size:24px;
  line-height:1.2;

  font-weight:800;

  color:var(--text);
}

.solution-top p{
  margin:9px 0 0;

  font-size:15px;
  line-height:1.7;

  color:rgba(11,18,32,.70);
}

.solution-body{
  padding:22px 24px;
}

.solution-body p{
  margin:0;

  color:var(--muted);

  line-height:1.82;
}

.solution-body ul{
  display:grid;

  gap:10px;

  margin:18px 0 0;
  padding:0;

  list-style:none;
}

.solution-body li{
  position:relative;

  padding-left:24px;

  color:var(--muted);

  line-height:1.68;
}

.solution-body li::before{
  content:"";

  position:absolute;

  left:0;
  top:8px;

  width:9px;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );
}

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

.product-stack{
  display:grid;

  gap:24px;

  max-width:1180px;

  margin:0 auto;
}

.product-suite{
  display:grid;

  grid-template-columns:
    420px 1fr;

  gap:28px;

  align-items:center;

  padding:24px;

  border-radius:32px;
}

.product-media{
  position:relative;

  overflow:hidden;

  padding:18px;

  min-height:300px;

  border-radius:28px;

  background:
    radial-gradient(
      520px 240px at 18% 18%,
      rgba(255,135,0,.10),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      rgba(7,21,139,.06),
      rgba(255,255,255,.96)
    );
}

.product-media::before{
  content:"";

  position:absolute;
  inset:-40%;

  background:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.42) 50%,
      transparent 65%
    );

  transform:
    translateX(-35%)
    rotate(12deg);

  opacity:.42;

  animation:
    sweep 9s cubic-bezier(.2,.8,.2,1) infinite;

  pointer-events:none;
}

.product-media img{
  position:relative;
  z-index:1;

  width:100%;
  height:100%;

  min-height:264px;

  object-fit:cover;

  border-radius:22px;

  box-shadow:
    0 24px 60px rgba(0,0,0,.16),
    0 0 0 8px rgba(255,255,255,.55);
}

.product-copy{
  display:flex;
  flex-direction:column;

  gap:14px;
}

.product-kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  width:fit-content;

  padding:8px 12px;

  border-radius:999px;

  background:rgba(255,135,0,.08);

  border:
    1px solid rgba(255,135,0,.12);

  color:var(--mops-orange);

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.product-copy h3{
  margin:0;

  font-size:clamp(28px,3vw,38px);
  line-height:1.08;

  font-weight:800;

  color:var(--text);
}

.product-copy p{
  margin:0;

  color:var(--muted);

  font-size:17px;
  line-height:1.82;
}

.product-points{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px 16px;

  margin-top:6px;
  padding:0;

  list-style:none;
}

.product-points li{
  position:relative;

  padding:
    13px 14px 13px 34px;

  border-radius:18px;

  background:#fff;

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 10px 24px rgba(7,21,139,.04);

  color:var(--muted);

  line-height:1.62;
}

.product-points li::before{
  content:"";

  position:absolute;

  left:14px;
  top:18px;

  width:9px;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );
}

.product-note{
  margin-top:4px;

  padding:14px 16px;

  border-radius:18px;

  background:rgba(7,21,139,.035);

  border:
    1px solid rgba(7,21,139,.06);

  color:var(--muted);

  font-size:15px;
  line-height:1.72;
}

.horizontal-suite{
  padding:30px;

  border-radius:32px;
}

.horizontal-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;

  margin-top:20px;
}

.horizontal-card{
  padding:24px;

  border-radius:26px;

  background:#fff;

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 12px 30px rgba(7,21,139,.05);
}

.horizontal-card i{
  margin-bottom:16px;

  color:var(--mops-orange);

  font-size:28px;
}

.horizontal-card h4{
  margin:0 0 10px;

  font-size:20px;
  line-height:1.2;
}

.horizontal-card p{
  margin:0;

  color:var(--muted);

  line-height:1.75;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.benefit-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}

.benefit{
  padding:24px 20px;

  border-radius:26px;

  text-align:center;
}

.benefit strong{
  display:block;

  margin-bottom:10px;

  font-size:32px;
  font-weight:800;

  color:var(--mops-blue);
}

.benefit span{
  display:block;

  font-size:15px;
  line-height:1.7;

  color:var(--muted);
}

/* =========================================================
   PRICING / OPERATING MODEL
   ========================================================= */

.pricing-grid{
  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:26px;

  align-items:center;
}

.pricing-list{
  padding:18px;

  border-radius:30px;
}

.pricing-row{
  display:grid;

  grid-template-columns:
    66px 1fr;

  gap:16px;

  align-items:start;

  padding:18px;

  border-radius:20px;

  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease);
}

.pricing-row:hover{
  background:
    radial-gradient(
      520px 220px at 18% 18%,
      rgba(255,135,0,.08),
      transparent 60%
    ),
    rgba(7,21,139,.02);

  transform:translateY(-2px);
}

.pricing-badge{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(7,21,139,.06),
      rgba(255,255,255,.94)
    );

  border:
    1px solid rgba(9,18,40,.06);

  box-shadow:var(--shadow-xs);
}

.pricing-badge i{
  font-size:24px;

  color:var(--mops-orange);
}

.pricing-row h3{
  margin:0 0 8px;

  font-size:20px;
  font-weight:800;

  color:var(--text);
}

.pricing-row p{
  margin:0;

  color:var(--muted);

  line-height:1.78;
}

.pricing-side{
  position:relative;

  overflow:hidden;

  padding:24px;

  border-radius:32px;

  background:
    radial-gradient(
      500px 220px at 20% 20%,
      rgba(255,135,0,.12),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      #07158b 0%,
      #020814 100%
    );

  color:#fff;

  box-shadow:
    0 26px 72px rgba(2,8,20,.22);

  border:
    1px solid rgba(255,255,255,.08);
}

.pricing-side::before{
  content:"";

  position:absolute;
  inset:-50%;

  background:
    radial-gradient(
      circle at 50% 36%,
      rgba(255,255,255,.08),
      transparent 40%
    );

  pointer-events:none;
}

.pricing-side h3,
.pricing-side p,
.pricing-points{
  position:relative;
  z-index:1;
}

.pricing-side h3{
  margin:0 0 12px;

  font-size:30px;
  font-weight:800;

  color:#fff;
}

.pricing-side p{
  margin:0 0 20px;

  color:rgba(255,255,255,.84);

  line-height:1.8;
}

.pricing-points{
  display:grid;

  gap:10px;
}

.pricing-points div{
  padding:14px 16px;

  border-radius:16px;

  background:rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.14);

  font-weight:700;

  color:#fff;

  backdrop-filter:blur(8px);
}

/* =========================================================
   COMPANY
   ========================================================= */

.company-top{
  display:grid;

  grid-template-columns:
    1fr .95fr;

  gap:22px;

  align-items:start;
}

.company-box,
.values-box,
.cert-box{
  padding:26px;

  border-radius:30px;
}

.company-box h3,
.values-box h3,
.team-box h3,
.cert-box h3{
  margin-bottom:12px;

  font-size:24px;
  font-weight:800;

  color:var(--text);
}

.company-box p,
.values-box p{
  margin:0;

  color:var(--muted);

  line-height:1.82;
}

.company-list{
  display:grid;

  gap:10px;

  margin:18px 0 0;
  padding:0;

  list-style:none;
}

.company-list li,
.value-pill{
  position:relative;

  padding:
    12px 14px 12px 38px;

  border-radius:16px;

  background:rgba(7,21,139,.035);

  border:
    1px solid rgba(7,21,139,.06);

  color:var(--muted);
}

.company-list li::before,
.value-pill::before{
  content:"";

  position:absolute;

  left:15px;
  top:17px;

  width:9px;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );
}

.values-box{
  background:
    radial-gradient(
      680px 260px at 20% 20%,
      rgba(255,135,0,.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #fbfcff
    );
}

.values-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  margin-top:18px;
}

.value-pill{
  padding:
    14px 14px 14px 40px;

  box-shadow:
    0 8px 20px rgba(7,21,139,.03);
}

.value-pill::before{
  left:16px;
  top:18px;

  width:10px;
  height:10px;
}

.team-box{
  margin-top:22px;
  padding:22px;

  border-radius:30px;
}

.team-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}

.member{
  cursor:pointer;

  padding:18px 14px;

  border-radius:24px;

  text-align:center;
}

.member img{
  width:88px;
  height:88px;

  margin:0 auto;

  border-radius:999px;

  object-fit:cover;

  border:
    6px solid rgba(255,135,0,.14);

  box-shadow:
    0 16px 36px rgba(0,0,0,.10);
}

.member h3{
  margin:12px 0 6px;

  font-size:18px;
  font-weight:800;

  color:var(--text);
}

.member p{
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.58;
}

.cert-box{
  margin-top:22px;

  text-align:center;
}

.cert-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:16px;

  margin-top:16px;
}

.cert-row img{
  width:auto;

  max-height:92px;

  border-radius:14px;

  border:
    1px solid rgba(9,18,40,.07);

  box-shadow:
    0 12px 28px rgba(7,21,139,.05);

  background:#fff;
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-box{
  padding:18px;

  border-radius:30px;
}

.faq-grid{
  display:grid;

  gap:12px;
}

details{
  padding:0 16px;

  border-radius:20px;
}

summary{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  list-style:none;

  cursor:pointer;

  padding:20px 4px;

  font-size:18px;
  font-weight:800;

  color:var(--text);
}

summary::-webkit-details-marker{
  display:none;
}

details p{
  margin:0 0 18px;

  color:var(--muted);

  line-height:1.8;
}

details[open]{
  border-color:
    rgba(255,135,0,.18);

  box-shadow:
    0 18px 34px rgba(7,21,139,.06);
}

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

.contact{
  color:#fff;

  background:
    radial-gradient(
      1000px 500px at 18% 22%,
      rgba(10,25,160,.24),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 82% 18%,
      rgba(0,0,0,.36),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      #07158b 0%,
      #020814 100%
    );

  box-shadow:
    0 30px 88px rgba(2,8,20,.20);
}

.contact .section-head h2{
  color:#fff;
}

.contact .section-head p{
  color:rgba(255,255,255,.82);
}

.contact-box{
  padding:24px;

  border-radius:30px;

  background:rgba(255,255,255,.08);

  border-color:
    rgba(255,255,255,.12);

  box-shadow:
    0 28px 70px rgba(0,0,0,.18);

  backdrop-filter:blur(14px);
}

.contact-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin-bottom:18px;
}

.contact-card{
  display:flex;
  align-items:center;

  gap:14px;

  padding:18px;

  border-radius:22px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease);
}

.contact-card:hover{
  transform:translateY(-2px);

  background:rgba(255,255,255,.11);

  border-color:
    rgba(255,255,255,.18);
}

.contact-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #ffb35d,
      #ff8700
    );

  color:#111;

  font-size:21px;

  box-shadow:
    0 14px 30px rgba(255,135,0,.20);
}

.contact-card h3{
  margin:0 0 6px;

  font-size:16px;
  font-weight:800;

  color:#fff;
}

.contact-card p,
.contact-card a{
  margin:0;

  color:rgba(255,255,255,.82);

  line-height:1.62;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;

  gap:14px;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  position:relative;

  overflow:hidden;

  padding-top:66px;
  margin-top:28px;

  background:#060a1d;

  color:rgba(255,255,255,.84);
}

.footer-card{
  position:relative;

  overflow:hidden;

  max-width:980px;

  margin:0 auto 32px;
  padding:24px;

  border-radius:30px;

  background:rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:
    0 26px 66px rgba(0,0,0,.18);

  text-align:center;

  backdrop-filter:blur(12px);
}

.footer-card::after{
  content:"";

  position:absolute;
  inset:-40%;

  background:
    linear-gradient(
      120deg,
      transparent 38%,
      rgba(255,255,255,.26) 50%,
      transparent 62%
    );

  transform:
    translateX(-55%)
    rotate(12deg);

  opacity:.35;

  animation:
    sweep 10s cubic-bezier(.2,.8,.2,1) infinite;

  pointer-events:none;
}

.footer-card h3{
  position:relative;
  z-index:1;

  margin:0 0 14px;

  font-size:24px;
  font-weight:800;

  color:#fff;
}

.socials{
  position:relative;
  z-index:1;

  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:12px;
}

.socials a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:54px;
  height:54px;

  border-radius:18px;

  background:rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.14);

  color:#fff;

  font-size:24px;

  box-shadow:
    0 12px 28px rgba(0,0,0,.10);

  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease);
}

.socials a:hover{
  transform:translateY(-2px);

  background:rgba(255,135,0,.16);

  border-color:
    rgba(255,135,0,.24);
}

.footer-bottom{
  padding:18px 0 22px;

  border-top:
    1px solid rgba(255,255,255,.08);

  text-align:center;
}

.footer-bottom p{
  margin:0;

  color:rgba(255,255,255,.76);

  font-size:14px;
  line-height:1.7;
}

.footer-bottom a{
  color:#fff;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight:700;
}

/* =========================================================
   TEAM MODAL
   ========================================================= */

.team-modal{
  position:fixed;
  inset:0;

  z-index:1200;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.team-modal.is-open{
  opacity:1;
  visibility:visible;
}

.team-modal-backdrop{
  position:absolute;
  inset:0;

  background:rgba(8,12,24,.58);

  backdrop-filter:blur(8px);
}

.team-modal-dialog{
  position:relative;
  z-index:1;

  width:min(980px,100%);

  overflow:hidden;

  background:#fff;

  border-radius:30px;

  box-shadow:
    0 34px 90px rgba(0,0,0,.22);
}

.team-modal-grid{
  display:grid;

  grid-template-columns:
    380px 1fr;

  min-height:540px;
}

.team-modal-media{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px 24px 0;

  background:
    linear-gradient(
      180deg,
      rgba(7,21,139,.07),
      rgba(7,21,139,.02)
    );
}

.team-modal-media img{
  width:100%;
  max-width:320px;
  height:auto;

  object-fit:contain;
}

.team-modal-copy{
  display:flex;
  flex-direction:column;

  gap:16px;

  padding:44px 42px 38px;
}

.team-modal-kicker{
  font-size:12px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--muted);
}

.team-modal-copy h3{
  margin:0;

  font-size:36px;
  line-height:1.04;

  font-weight:800;

  color:var(--text);
}

.team-modal-role{
  margin:0;

  color:var(--mops-blue);

  font-weight:700;
}

.team-modal-quote{
  margin:8px 0 0;
  padding:18px 20px;

  border-left:
    4px solid var(--mops-orange);

  border-radius:16px;

  background:rgba(255,135,0,.05);

  font-size:20px;
  line-height:1.5;

  color:var(--text);
}

.team-modal-text{
  margin:0;

  color:var(--muted);

  line-height:1.8;
}

.team-modal-tags{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:4px;
}

.team-modal-close{
  position:absolute;

  top:18px;
  right:18px;

  width:44px;
  height:44px;

  border:0;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(0,0,0,.12);

  cursor:pointer;
}

body.modal-open{
  overflow:hidden;
}

/* =========================================================
   HELP WIDGET
   ========================================================= */

.help-widget{
  position:fixed;

  right:24px;
  bottom:24px;

  z-index:999;

  display:flex;
  align-items:center;

  gap:14px;

  width:fit-content;
  max-width:420px;

  padding:16px;

  background:rgba(255,255,255,.96);

  border:
    1px solid rgba(255,135,0,.10);

  border-radius:24px;

  box-shadow:
    0 18px 45px rgba(0,0,0,.08);

  backdrop-filter:blur(12px);

  animation:
    floaty 4s ease-in-out infinite;
}

.help-avatar{
  width:58px;
  height:58px;

  padding:10px;

  flex-shrink:0;

  object-fit:contain;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ff8700,
      #ffb347
    );

  box-shadow:
    0 10px 24px rgba(255,135,0,.20);
}

.help-panel{
  display:flex;
  flex-direction:column;

  gap:10px;

  min-width:260px;
}

.help-title{
  font-size:15px;
  font-weight:800;
  line-height:1.2;

  color:#07158b;
}

.help-form{
  display:flex;
  align-items:center;

  gap:10px;
}

.help-input{
  flex:1;

  height:46px;

  padding:0 16px;

  border:none;
  outline:none;

  border-radius:16px;

  background:#f4f7fb;

  font-size:15px;

  color:#0b1220;

  font-family:'avenir_35light',Arial,sans-serif;
}

.help-input::placeholder{
  color:#7d8794;
}

.help-send{
  width:46px;
  height:46px;

  border:none;

  border-radius:14px;

  cursor:pointer;

  font-size:16px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #ff8700,
      #ff9d2f
    );

  box-shadow:
    0 12px 20px rgba(255,135,0,.22);

  transition:.25s ease;
}

.help-send:hover{
  transform:translateY(-2px);
}

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

.reveal,
.section-head,
.hero-copy > *,
.hero-panel,
.solution-card,
.product-suite,
.benefit,
.pricing-row,
.pricing-side,
.company-box,
.values-box,
.team-box,
.cert-box,
.faq-grid details,
.contact-card,
.footer-card,
.logo-row,
.signal-stack,
.hero-proof,
.testimonial-feature,
.testimonial-card,
.metric-card,
.platform-card{
  opacity:0;

  transform:
    translateY(var(--reveal-distance));

  filter:blur(6px);

  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);

  will-change:
    transform,
    opacity,
    filter;
}

.visible,
.section-head.is-visible,
.hero-copy > .is-visible,
.hero-panel.is-visible,
.solution-card.is-visible,
.product-suite.is-visible,
.benefit.is-visible,
.pricing-row.is-visible,
.pricing-side.is-visible,
.company-box.is-visible,
.values-box.is-visible,
.team-box.is-visible,
.cert-box.is-visible,
.faq-grid details.is-visible,
.contact-card.is-visible,
.footer-card.is-visible,
.logo-row.is-visible,
.signal-stack.is-visible,
.hero-proof.is-visible,
.testimonial-feature.is-visible,
.testimonial-card.is-visible,
.metric-card.is-visible,
.platform-card.is-visible{
  opacity:1;

  transform:none;

  filter:blur(0);
}

body.is-loaded .hero-copy > *,
body.is-loaded .hero-panel{
  opacity:1;

  transform:none;

  filter:blur(0);
}

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

@keyframes heroBrandSweep{
  0%{
    transform:
      translateX(-60%)
      rotate(8deg);
  }

  55%{
    transform:
      translateX(55%)
      rotate(8deg);
  }

  100%{
    transform:
      translateX(55%)
      rotate(8deg);
  }
}

@keyframes sweep{
  0%{
    transform:
      translateX(-55%)
      rotate(12deg);
  }

  55%{
    transform:
      translateX(55%)
      rotate(12deg);
  }

  100%{
    transform:
      translateX(55%)
      rotate(12deg);
  }
}

@keyframes floaty{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }
}

@keyframes videoPop{
  0%{
    transform:
      translateY(24px)
      scale(.96);

    box-shadow:
      0 18px 50px rgba(0,0,0,.08);
  }

  55%{
    transform:
      translateY(-14px)
      scale(1.025);

    box-shadow:
      0 46px 120px rgba(7,21,139,.16);
  }

  100%{
    transform:
      translateY(0)
      scale(1);
  }
}

/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1280px){

  .hero,
  .trust-band,
  .usecases-premium,
  .testimonials-premium,
  .platform-enterprise,
  .solutions,
  .showcase,
  .benefits,
  .pricing,
  .company,
  .faq,
  .contact{
    margin-left:32px;
    margin-right:32px;
  }
}

/* =========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   ========================================================= */

@media (max-width:1100px){

  .pricing-grid,
  .company-top,
  .testimonial-grid,
  .platform-grid{
    grid-template-columns:1fr;
  }

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

  .logo-row{
    justify-content:flex-start;
  }

  .nav-links{
    gap:10px;
  }

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

  .product-media{
    min-height:auto;
  }

  .product-media img{
    min-height:240px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:991px){

  .team-grid,
  .contact-grid,
  .benefit-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

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

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    grid-template-columns:1fr;
  }

  .story-row.reverse .story-copy,
  .story-row.reverse .story-visual{
    order:unset;
  }

  .values-grid,
  .product-points{
    grid-template-columns:1fr;
  }

  .hero-claim-wrap{
    flex-direction:column;

    gap:22px;

    padding:30px 24px;

    text-align:center;
  }

  .hero-side-logo{
    width:112px;
    height:112px;

    padding:12px;

    transform:none;
  }

  .hero-claim-wrap h1{
    text-align:center;

    font-size:
      clamp(44px,10vw,68px);
  }

  .nav-links{
    display:none;

    position:absolute;

    top:calc(100% + 8px);

    left:20px;
    right:20px;

    padding:16px;

    border-radius:22px;

    background:#fff;

    border:
      1px solid rgba(9,18,40,.08);

    box-shadow:var(--shadow-lg);

    flex-direction:column;
    align-items:stretch;
  }

  .nav-links.open{
    display:flex;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .nav-cta .btn-primary{
    display:none;
  }

  .team-modal-grid{
    grid-template-columns:1fr;
  }

  .team-modal-copy{
    padding:28px 24px;
  }

  .story-screen video,
  .story-screen img{
    min-height:320px;
  }

  .hero-proof blockquote{
    font-size:28px;
  }

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

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

@media (max-width:767px){

  :root{
    --nav-h:60px;
  }

  body{
    padding-top:60px;

    line-height:1.55;
  }

  section{
    padding:52px 0;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .hero,
  .trust-band,
  .usecases-premium,
  .testimonials-premium,
  .platform-enterprise,
  .solutions,
  .showcase,
  .benefits,
  .pricing,
  .company,
  .faq,
  .contact{
    margin:
      10px 8px 0;

    border-radius:20px;
  }

  /* ---------- Navigation ---------- */

  .brand img{
    width:108px;
  }

  .nav-toggle{
    width:42px;
    height:42px;

    border-radius:12px;
  }

  .nav-links{
    left:10px;
    right:10px;

    padding:12px;

    border-radius:18px;
  }

  .nav-links a{
    padding:9px 12px;

    font-size:13px;
  }

  /* ---------- Section headings ---------- */

  .section-head{
    margin-bottom:32px;
  }

  .section-head h2{
    margin:12px 0 10px;

    font-size:32px;
    line-height:1.08;

    letter-spacing:-.03em;
  }

  .section-head p{
    font-size:15px;
    line-height:1.65;
  }

  .section-head h2::after{
    width:54px;
    height:3px;

    margin-top:14px;
  }

  .eyebrow{
    gap:7px;

    padding:7px 11px;

    font-size:10px;
  }

  /* ---------- Hero ---------- */

  .hero{
    padding:30px 0 40px;
  }

  .hero-grid{
    gap:24px;
  }

  .hero-claim-wrap{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:14px;

    margin:18px auto;
    padding:20px 14px;

    border-radius:22px;
  }

  .hero-side-logo{
    width:64px;
    height:64px;

    padding:8px;
  }

  .hero-copy h1{
    margin:12px 0;
  }

  .hero-brand{
    margin-bottom:10px;

    font-size:38px;
  }

  .hero-title,
  .hero-claim-wrap h1{
    font-size:34px;
    line-height:1;

    text-align:center;
  }

  .hero-intro,
  .hero-copy p{
    font-size:15px;
    line-height:1.65;
  }

  .hero-subline{
    gap:6px;

    margin:16px 0 18px;
  }

  .hero-subline span{
    padding:6px 9px;

    border-radius:9px;

    font-size:12px;
  }

  .hero-stats{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;

    margin-top:20px;
  }

  .stat{
    padding:16px 14px;

    border-radius:18px;
  }

  .stat strong{
    margin-bottom:6px;

    font-size:21px;
  }

  .stat span{
    font-size:13px;
    line-height:1.5;
  }

  .hero-proof{
    padding:16px 14px;

    border-radius:20px;
  }

  .hero-proof blockquote{
    font-size:21px;
    line-height:1.35;
  }

  .hero-proof p{
    margin-top:9px;

    font-size:12px;
  }

  .hero-panel{
    padding:10px;

    border-radius:22px;
  }

  .hero-screen{
    padding:12px;

    border-radius:18px;
  }

  .signal-stack{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .signal-card{
    margin-bottom:0;

    padding:15px;

    border-radius:17px;
  }

  .signal-card h3{
    gap:9px;

    margin-bottom:7px;

    font-size:16px;
  }

  .signal-card p{
    font-size:14px;
    line-height:1.55;
  }

  .signal-number{
    width:28px;
    height:28px;
    min-width:28px;

    font-size:13px;
  }

  /* ---------- Tags ---------- */

  .tag-list{
    gap:6px;

    margin-top:10px;
  }

  .tag,
  .logo-chip,
  .security-pill,
  .team-modal-tags span{
    padding:6px 9px;

    border-radius:9px;

    font-size:11px;
  }

  /* ---------- Benefits ---------- */

  .benefit-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .benefit{
    padding:17px 14px;

    border-radius:18px;
  }

  .benefit strong{
    margin-bottom:6px;

    font-size:25px;
  }

  .benefit span{
    font-size:13px;
    line-height:1.55;
  }

  /* ---------- Solutions ---------- */

  .solution-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .solution-top{
    padding:17px 16px;
  }

  .solution-top h3{
    font-size:20px;
  }

  .solution-top p{
    margin-top:6px;

    font-size:14px;
    line-height:1.55;
  }

  .solution-body{
    padding:16px;
  }

  .solution-body p,
  .solution-body li{
    font-size:14px;
    line-height:1.6;
  }

  .solution-body ul{
    gap:8px;

    margin-top:14px;
  }

  .logo-row{
    justify-content:center;

    gap:8px;
  }

  /* ---------- Story / usecases ---------- */

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    display:grid;

    grid-template-columns:
      minmax(0,1fr) !important;

    gap:26px;

    margin:56px 0;
  }

  .story-row.reverse .story-copy,
  .story-row.reverse .story-visual{
    order:unset;
  }

  .story-copy,
  .story-visual{
    width:100%;

    min-width:0;
    max-width:none;
  }

  .story-row:not(.story-row-wide) .story-visual{
    max-width:none;
  }

  .story-number{
    margin-bottom:8px;

    font-size:11px;
  }

  .story-kicker{
    margin-bottom:9px;

    font-size:12px;
  }

  .story-copy h3{
    margin-bottom:14px;

    font-size:30px;
    line-height:1.08;
  }

  .story-copy p{
    margin-bottom:18px;

    font-size:15px;
    line-height:1.65;
  }

  .story-copy ul{
    gap:9px;
  }

  .story-copy li{
    padding-left:21px;

    font-size:14px;
    line-height:1.55;
  }

  .story-copy li::before{
    width:8px;
    height:8px;

    top:7px;
  }

  .story-screen{
    padding:10px;

    border-radius:20px;
  }

  .story-screen-inner{
    border-radius:15px;
  }

  .story-screen video,
  .story-screen img,
  .story-row-wide:not(.story-desktop) .story-screen video,
  .story-row-wide:not(.story-desktop) .story-screen img{
    width:100%;

    min-height:0;

    border-radius:15px;
  }

  .story-desktop .story-screen-inner{
    width:100%;

  }

  /* ---------- Products ---------- */

  .product-stack{
    gap:16px;
  }

  .product-suite,
  .horizontal-suite{
    display:grid;

    grid-template-columns:
      minmax(0,1fr) !important;

    padding:14px;

    gap:15px;

    border-radius:20px;
  }

  .product-media{
    padding:10px;

    min-height:0;

    border-radius:18px;
  }

  .product-media img{
    min-height:0;

    border-radius:14px;
  }

  .product-copy{
    gap:10px;
  }

  .product-kicker{
    padding:6px 9px;

    font-size:10px;
  }

  .product-copy h3{
    font-size:26px;
  }

  .product-copy p{
    font-size:14px;
    line-height:1.65;
  }

  .product-points{
    display:grid;

    grid-template-columns:1fr;

    gap:8px;
  }

  .product-points li{
    padding:
      10px 10px 10px 28px;

    border-radius:13px;

    font-size:13px;
    line-height:1.5;
  }

  .product-points li::before{
    left:11px;
    top:15px;

    width:7px;
    height:7px;
  }

  .product-note{
    padding:11px 12px;

    border-radius:13px;

    font-size:13px;
    line-height:1.55;
  }

  .horizontal-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  /* ---------- Testimonials ---------- */

  .testimonial-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .testimonial-feature{
    margin-bottom:26px;

    padding:22px 17px;

    border-radius:20px;
  }

  .testimonial-feature blockquote{
    font-size:22px;
    line-height:1.35;
  }

  .testimonial-card{
    padding:18px 16px;

    border-radius:20px;
  }

  .testimonial-icon{
    width:46px;
    height:46px;

    margin-bottom:12px;

    border-radius:14px;

    font-size:18px;
  }

  .testimonial-card blockquote{
    font-size:15px;
    line-height:1.6;
  }

  /* ---------- Platform ---------- */

  .platform-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .platform-card{
    padding:18px 16px;

    border-radius:20px;
  }

  .platform-kicker{
    margin-bottom:10px;

    padding:6px 9px;

    font-size:10px;
  }

  .platform-card h3{
    margin-bottom:7px;

    font-size:21px;
  }

  .platform-card p{
    font-size:14px;
    line-height:1.62;
  }

  .platform-pill-row{
    gap:6px;

    margin-top:12px;
  }

  /* ---------- Metrics ---------- */

  .metrics-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .metric-card{
    padding:18px 14px;

    border-radius:18px;
  }

  .metric-value{
    font-size:27px;
  }

  .metric-label{
    font-size:13px;
  }

  /* ---------- Pricing ---------- */

  .pricing-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:14px;
  }

  .pricing-side{
    padding:18px 16px;

    border-radius:20px;
  }

  .pricing-side h3{
    font-size:23px;
  }

  .pricing-side p{
    margin-bottom:14px;

    font-size:14px;
    line-height:1.6;
  }

  .pricing-points{
    gap:7px;
  }

  .pricing-points div{
    padding:10px 11px;

    border-radius:12px;

    font-size:13px;
  }

  /* ---------- Company ---------- */

  .company-top{
    display:grid;

    grid-template-columns:1fr;

    gap:12px;
  }

  .company-box,
  .values-box,
  .cert-box{
    padding:18px 16px;

    border-radius:20px;
  }

  .company-box h3,
  .values-box h3,
  .team-box h3,
  .cert-box h3{
    margin-bottom:8px;

    font-size:21px;
  }

  .company-box p,
  .values-box p{
    font-size:14px;
    line-height:1.62;
  }

  .company-list{
    gap:7px;

    margin-top:13px;
  }

  .company-list li,
  .value-pill{
    padding:
      10px 11px 10px 31px;

    border-radius:12px;

    font-size:13px;
    line-height:1.5;
  }

  .values-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:8px;

    margin-top:13px;
  }

  .team-box{
    margin-top:14px;

    padding:16px;

    border-radius:20px;
  }

  .team-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;
  }

  .member{
    padding:14px 10px;

    border-radius:18px;
  }

  .member img{
    width:68px;
    height:68px;

    border-width:4px;
  }

  .member h3{
    margin:9px 0 4px;

    font-size:16px;
  }

  .member p{
    font-size:12px;
    line-height:1.45;
  }

  .cert-box{
    margin-top:14px;
  }

  .cert-row{
    gap:10px;

    margin-top:12px;
  }

  .cert-row img{
    max-height:66px;
  }

  /* ---------- FAQ ---------- */

  .faq-box{
    padding:10px;

    border-radius:20px;
  }

  .faq-grid{
    gap:8px;
  }

  details{
    padding:0 11px;

    border-radius:15px;
  }

  summary{
    gap:10px;

    padding:15px 2px;

    font-size:15px;
    line-height:1.35;
  }

  details p{
    margin-bottom:14px;

    font-size:14px;
    line-height:1.6;
  }

  /* ---------- Contact ---------- */

  .contact-box{
    padding:16px;

    border-radius:20px;
  }

  .contact-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:9px;

    margin-bottom:12px;
  }

  /*
   * Keep icon + text horizontal.
   */
  .contact-card{
    display:flex;

    flex-direction:row;

    align-items:center;

    gap:11px;

    padding:13px;

    border-radius:16px;
  }

  .contact-icon{
    flex:0 0 auto;

    width:42px;
    height:42px;

    border-radius:13px;

    font-size:17px;
  }

  .contact-card h3{
    margin-bottom:3px;

    font-size:14px;
  }

  .contact-card p,
  .contact-card a{
    font-size:13px;
    line-height:1.5;
  }

  .contact-actions{
    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:8px;
  }

  /* ---------- Buttons ---------- */

  .btn{
    width:100%;

    padding:12px 16px;

    font-size:14px;
  }

  /* ---------- Footer ---------- */

  footer{
    padding-top:40px;
  }

  .footer-card{
    margin-bottom:22px;

    padding:18px;

    border-radius:20px;
  }

  .footer-card h3{
    margin-bottom:10px;

    font-size:20px;
  }

  .socials{
    gap:8px;
  }

  .socials a{
    width:46px;
    height:46px;

    border-radius:14px;

    font-size:20px;
  }

  /* ---------- Team modal ---------- */

 .team-modal{
  align-items:flex-start;

  padding:8px;

  overflow-y:auto;
}

.team-modal-dialog{
  position:relative;

  width:100%;
  max-width:100%;

  max-height:calc(100dvh - 16px);

  margin:auto;

  overflow-y:auto;

  border-radius:18px;
}

.team-modal-grid{
  display:grid;

  grid-template-columns:1fr;

  min-height:0;
}

.team-modal-media{
  padding:14px 14px 0;
}

.team-modal-media img{
  width:auto;

  max-width:180px;
  max-height:24vh;

  margin:0 auto;

  object-fit:contain;
}

.team-modal-copy{
  gap:9px;

  padding:16px 16px 22px;
}

.team-modal-copy h3{
  margin:0;

  font-size:24px;
  line-height:1.08;
}

.team-modal-role{
  font-size:14px;
}

.team-modal-quote{
  margin-top:2px;

  padding:11px 12px;

  font-size:15px;
  line-height:1.45;
}

.team-modal-text{
  font-size:13px;
  line-height:1.55;
}

.team-modal-tags{
  gap:6px;
}

.team-modal-tags span{
  padding:5px 8px;

  font-size:10px;
}

.team-modal-close{
  position:absolute;

  top:10px;
  right:10px;

  z-index:50;

  width:40px;
  height:40px;
}
  /* ---------- Help widget ---------- */

  .help-widget{
    left:10px;
    right:10px;
    bottom:10px;

    width:auto;
    max-width:none;

    flex-direction:column;

    align-items:stretch;

    gap:9px;

    padding:10px;

    border-radius:18px;
  }

  .help-avatar{
    width:46px;
    height:46px;

    padding:8px;

    align-self:center;
  }

  .help-panel{
    width:100%;
    min-width:0;
  }

  .help-title{
    font-size:13px;

    text-align:center;
  }

  /*
   * Keep input + send horizontal.
   */
  .help-form{
    display:flex;

    flex-direction:row;

    align-items:center;

    gap:7px;
  }

  .help-input{
    min-width:0;

    height:42px;

    padding:0 12px;

    border-radius:12px;

    font-size:14px;
  }

  .help-send{
    flex:0 0 auto;

    width:42px;
    height:42px;

    border-radius:12px;
  }
}

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

@media (max-width:420px){

  section{
    padding:44px 0;
  }

  .container{
    padding-left:12px;
    padding-right:12px;
  }

  .section-head{
    margin-bottom:26px;
  }

  .section-head h2{
    font-size:28px;
  }

  .section-head p{
    font-size:14px;
  }

  .hero-brand{
    font-size:34px;
  }

  .hero-title,
  .hero-claim-wrap h1{
    font-size:30px;
  }

  .hero-intro,
  .hero-copy p{
    font-size:14px;
  }

  .hero-subline span{
    font-size:11px;
  }

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    margin:44px 0;
  }

  .story-copy h3{
    font-size:27px;
  }

  .story-copy p,
  .story-copy li{
    font-size:14px;
  }

  .product-copy h3{
    font-size:23px;
  }

  .testimonial-feature blockquote{
    font-size:20px;
  }

  .platform-card h3{
    font-size:19px;
  }

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

  .member img{
    width:74px;
    height:74px;
  }

  .help-widget{
    left:6px;
    right:6px;
    bottom:6px;
  }
}

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

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

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

    transition:none !important;

    scroll-behavior:auto !important;
  }

  .reveal,
  .section-head,
  .hero-copy > *,
  .hero-panel,
  .solution-card,
  .product-suite,
  .benefit,
  .pricing-row,
  .pricing-side,
  .company-box,
  .values-box,
  .team-box,
  .cert-box,
  .faq-grid details,
  .contact-card,
  .footer-card,
  .logo-row,
  .signal-stack,
  .hero-proof,
  .testimonial-feature,
  .testimonial-card,
  .metric-card,
  .platform-card{
    opacity:1 !important;

    transform:none !important;

    filter:none !important;
  }
}

/* =========================================================
   RESPONSIVE STORY VISUALS
   ---------------------------------------------------------
   Use one of these classes on .story-visual:

   .story-visual--desktop
   .story-visual--tablet
   .story-visual--phone

   Example:
   <div class="story-visual story-visual--phone">...</div>

   These rules intentionally override the older story sizing
   rules above and remove fixed image/video minimum heights.
   ========================================================= */

/* Keep the story layout fluid instead of tying it to device widths. */
.story-row,
.story-row-wide,
.story-row-wide.story-desktop{
  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);

  gap:clamp(36px, 5.5vw, 92px);

  align-items:center;
}

.story-row.reverse,
.story-row-wide.reverse{
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, .92fr);
}

/* The row remains responsible only for ordering. */
.story-row.reverse .story-copy{
  order:2;
}

.story-row.reverse .story-visual{
  order:1;
}

/* Visual column always consumes the available grid column. */
.story-visual,
.story-desktop .story-visual,
.story-row:not(.story-row-wide) .story-visual{
  width:100%;
  min-width:0;
  max-width:none;

  display:flex;
  align-items:center;
  justify-content:center;

  justify-self:stretch;

  transform-style:preserve-3d;
}

/* Base frame. */
.story-screen{
  max-width:100%;
}

/*
 * Screenshots should retain their original colours.
 * The old ::before layer added orange + dark/blue tinting.
 */
.story-screen-inner::before{
  display:none;
}

/* Do not force screenshots/videos to a common height or crop them. */
.story-screen video,
.story-screen img,
.story-row-wide:not(.story-desktop) .story-screen video,
.story-row-wide:not(.story-desktop) .story-screen img,
.story-row:not(.story-row-wide) .story-screen video,
.story-row:not(.story-row-wide) .story-screen img,
.story-desktop .story-screen video,
.story-desktop .story-screen img{
  display:block;

  width:auto;
  max-width:100%;

  height:auto;
  min-height:0;
  max-height:none;

  object-fit:contain;

  background:transparent;
}

/* ---------------------------------------------------------
   DESKTOP / LANDSCAPE APPLICATION SCREEN
   --------------------------------------------------------- */

.story-visual--desktop .story-screen{
  width:100%;
}

.story-visual--desktop .story-screen-inner{
  width:100%;
}

.story-visual--desktop .story-screen img,
.story-visual--desktop .story-screen video{
  width:100%;
  height:auto;

  max-width:100%;
  max-height:none;
}

/* ---------------------------------------------------------
   TABLET / PORTRAIT OR NEAR-PORTRAIT APPLICATION SCREEN
   --------------------------------------------------------- */

.story-visual--tablet .story-screen{
  width:fit-content;
  max-width:100%;
}

.story-visual--tablet .story-screen-inner{
  width:fit-content;
  max-width:100%;
}

.story-visual--tablet .story-screen img,
.story-visual--tablet .story-screen video{
  width:auto;
  max-width:100%;

  height:auto;
  max-height:clamp(440px, 55vw, 680px);

  margin-inline:auto;
}

/* ---------------------------------------------------------
   PHONE / NARROW PORTRAIT APPLICATION SCREEN
   --------------------------------------------------------- */

.story-visual--phone .story-screen{
  width:fit-content;
  max-width:100%;
}

.story-visual--phone .story-screen-inner{
  width:fit-content;
  max-width:100%;
}

.story-visual--phone .story-screen img,
.story-visual--phone .story-screen video{
  width:auto;
  max-width:100%;

  height:auto;
  max-height:clamp(420px, 50vw, 620px);

  margin-inline:auto;
}

/*
 * Retain the subtle outer CI glow.
 * It stays behind the screenshot and therefore does not tint the UI.
 */
.story-screen.orange::after{
  background:#ff8700;
  opacity:.10;
}

.story-screen.blue::after{
  background:#1023b8;
  opacity:.10;
}

/* Keep hover enlargement restrained for UI screenshots. */
.story-row:hover .story-screen img{
  transform:scale(1.015);

  filter:
    saturate(1.02)
    contrast(1.01);
}


/* =========================================================
   RESPONSIVE STORY LAYOUT — TABLET
   ========================================================= */

@media (max-width:991px){

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:32px;

    margin:72px 0;
  }

  /*
   * On stacked layouts we keep a predictable reading sequence:
   * text first, visual second.
   */
  .story-row.reverse .story-copy,
  .story-row.reverse .story-visual{
    order:unset;
  }

  .story-copy,
  .story-visual{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .story-visual{
    justify-self:stretch;
  }

  .story-visual--desktop .story-screen{
    width:100%;
  }

  .story-visual--tablet .story-screen img,
  .story-visual--tablet .story-screen video{
    max-height:min(64vh, 620px);
  }

  .story-visual--phone .story-screen img,
  .story-visual--phone .story-screen video{
    max-height:min(62vh, 560px);
  }
}


/* =========================================================
   RESPONSIVE STORY LAYOUT — MOBILE
   ========================================================= */

@media (max-width:767px){

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    gap:24px;

    margin:52px 0;
  }

  .story-screen{
    padding:8px;

    border-radius:18px;
  }

  .story-screen-inner{
    border-radius:12px;
  }

  .story-screen img,
  .story-screen video{
    border-radius:12px;
  }

  .story-screen::after{
    width:190px;
    height:190px;

    top:-65px;
    right:-65px;

    filter:blur(70px);
  }

  .story-visual--desktop .story-screen,
  .story-visual--desktop .story-screen-inner,
  .story-visual--desktop img,
  .story-visual--desktop video{
    width:100%;
  }

  .story-visual--tablet .story-screen img,
  .story-visual--tablet .story-screen video{
    max-height:min(66vh, 520px);
  }

  .story-visual--phone .story-screen img,
  .story-visual--phone .story-screen video{
    max-height:min(64vh, 480px);
  }

  /*
   * Mouse hover has little meaning on touch devices.
   * Avoid unnecessary zooming if a browser synthesises hover.
   */
  .story-row:hover .story-screen{
    transform:none;
  }

  .story-row:hover .story-screen-inner{
    transform:none;
  }

  .story-row:hover .story-screen img{
    transform:none;
    filter:none;
  }
}


/* =========================================================
   RESPONSIVE STORY LAYOUT — VERY SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

  .story-row,
  .story-row.reverse,
  .story-row-wide,
  .story-row-wide.reverse,
  .story-row-wide.story-desktop{
    gap:20px;

    margin:44px 0;
  }

  .story-screen{
    padding:6px;

    border-radius:16px;
  }

  .story-screen-inner,
  .story-screen img,
  .story-screen video{
    border-radius:10px;
  }

  .story-visual--tablet .story-screen img,
  .story-visual--tablet .story-screen video{
    max-height:min(62vh, 460px);
  }

  .story-visual--phone .story-screen img,
  .story-visual--phone .story-screen video{
    max-height:min(60vh, 430px);
  }
}