/* ==========================================================================
   BGLOBAL — "Aurora Light" (v6)
   Bright, airy, vivid security + AI enterprise theme.
   --------------------------------------------------------------------------
   White / off-white base · soft pastel aurora gradients (indigo·violet·teal)
   · glassy light product mocks with soft glow · vivid but restrained accents.
   No dark sections. Header + footer light. Section modifiers
   (--white/--blue/--mint/--violet) map to light aurora-tinted panels.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* surfaces */
  --bg-page:#F6F8FD;
  --bg-white:#FFFFFF;
  --bg-soft-blue:#F1F5FE;
  --bg-soft-mint:#EEFAF5;
  --bg-soft-violet:#F5F1FE;
  --bg-footer:#EDF1F9;

  /* text */
  --text-primary:#141B2D;
  --text-secondary:#52607A;
  --text-muted:#8794A8;

  /* lines */
  --border:#E7EBF4;
  --border-soft:#EFF2F8;
  --border-strong:#D6DCEA;

  /* brand / accents (vivid) */
  --primary:#4E5FD2;
  --primary-2:#7A5FE6;
  --primary-strong:#3B49B8;
  --cyan:#0BB5C4;   /* logo teal */
  --blue:#0E8FEA;   /* logo blue */
  --security:#10A277;
  --data:#2E8BD8;
  --ai:#7C5CE6;
  --amber:#D9922B;

  /* soft tints */
  --primary-soft:#EAEDFF;
  --security-soft:#E1F6EF;
  --data-soft:#E4F2FC;
  --ai-soft:#F0EAFD;
  --cyan-soft:#E0F6F8;

  /* diagram semantic */
  --d-app:#4E5FD2; --d-security:#10A277; --d-integ:#2E8BD8; --d-ai:#7C5CE6;
  --d-external:#8794A8; --d-boundary:#D85E70;

  /* status */
  --st-ready:#10A277; --st-ready-soft:#E1F6EF;
  --st-dev:#B4791A; --st-dev-soft:#FBF1DD;
  --st-roadmap:#5C6880; --st-roadmap-soft:#EEF1F7;
  --st-platform:#4E5FD2; --st-platform-soft:#EAEDFF;

  /* typography */
  --font-sans:"Be Vietnam Pro","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(2.5rem,4.8vw,4rem);
  --fs-h1:clamp(2rem,3.4vw,2.9rem);
  --fs-h2:clamp(1.75rem,2.8vw,2.45rem);
  --fs-h3:clamp(1.2rem,1.5vw,1.42rem);
  --fs-h4:1.06rem;
  --fs-body:1rem;
  --fs-lead:clamp(1.08rem,1.4vw,1.26rem);
  --fs-sm:.9rem; --fs-xs:.8rem; --fs-eyebrow:.74rem;
  --lh-tight:1.06; --lh-snug:1.32; --lh-body:1.65;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:5rem;
  --section-y:clamp(3rem,8vw,8.5rem);
  --container:1200px; --container-narrow:820px; --gutter:clamp(1.25rem,4vw,2.5rem);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* shadows / glow (soft, colourful) */
  --sh-xs:0 1px 2px rgba(20,27,45,.05);
  --sh-sm:0 1px 3px rgba(20,27,45,.05), 0 6px 16px rgba(20,27,45,.05);
  --sh-md:0 4px 12px rgba(20,27,45,.06), 0 16px 40px rgba(20,27,45,.08);
  --sh-lg:0 10px 24px rgba(20,27,45,.08), 0 30px 64px rgba(20,27,45,.12);
  --glow-primary:0 20px 50px rgba(78,95,210,.22);
  --glow-teal:0 20px 50px rgba(11,181,196,.20);

  --grad-brand:linear-gradient(120deg,#4E5FD2,#7A5FE6 50%,#0BB5C4);
  --grad-aurora:linear-gradient(120deg,#4E5FD2,#7A5FE6 50%,#0BB5C4);

  --ease:cubic-bezier(.4,0,.2,1); --dur:.24s; --header-h:76px;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;} *{margin:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}
body{font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-secondary); background:var(--bg-page); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden;}
img,svg,video{display:block; max-width:100%;} img{height:auto;}
h1,h2,h3,h4,h5{color:var(--text-primary); line-height:var(--lh-tight); font-weight:var(--fw-bold); letter-spacing:-.025em;}
h2{font-size:var(--fs-h2); line-height:1.12;}
h3{font-size:var(--fs-h3); line-height:var(--lh-snug); letter-spacing:-.015em;}
h4{font-size:var(--fs-h4); font-weight:var(--fw-semi); letter-spacing:-.01em;}
p{color:var(--text-secondary);}
strong{font-weight:var(--fw-semi); color:var(--text-primary);}
a{color:var(--primary); text-decoration:none; transition:color var(--dur) var(--ease);}
a:hover{color:var(--primary-strong);}
ul,ol{padding-left:1.15rem;}
.grad-text{background:var(--grad-aurora); -webkit-background-clip:text; background-clip:text; color:transparent;}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:3px;}
.skip-link{position:absolute; left:-999px; top:0; z-index:1000; background:var(--text-primary); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;}
.skip-link:focus{left:0; color:#fff;}

/* ---------------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.container--narrow{max-width:var(--container-narrow);}
.section{position:relative; padding-block:var(--section-y);}
.section--tight{padding-block:clamp(2rem,4.5vw,4rem);}
.section--white{background:var(--bg-white);}
.section--blue{background:
  radial-gradient(760px 420px at 88% -12%, rgba(78,95,210,.10), transparent 60%),
  radial-gradient(620px 380px at 6% 112%, rgba(11,181,196,.07), transparent 60%),
  var(--bg-soft-blue);}
.section--mint{background:
  radial-gradient(700px 400px at 12% -12%, rgba(16,162,119,.10), transparent 60%),
  var(--bg-soft-mint);}
.section--violet{background:
  radial-gradient(760px 420px at 85% -12%, rgba(124,92,230,.12), transparent 60%),
  var(--bg-soft-violet);}

.stack>*+*{margin-top:var(--sp-4);}
.grid{display:grid; gap:var(--sp-5);}
.text-center{text-align:center;} .mx-auto{margin-inline:auto;}
.measure{max-width:64ch;} .measure-narrow{max-width:52ch;}
.hidden{display:none !important;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);} .mt-6{margin-top:var(--sp-6);} .mt-7{margin-top:var(--sp-7);}

/* ---------------------------------------------------------------------------
   4. SECTION HEADING
   --------------------------------------------------------------------------- */
.section-heading{max-width:760px; margin-bottom:var(--sp-8);}
.section-heading--center{margin-inline:auto; text-align:center;}
.section-heading__eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-eyebrow); font-weight:var(--fw-semi); letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin-bottom:var(--sp-4);}
.section-heading__eyebrow::before{content:""; width:22px; height:1.5px; background:var(--grad-brand);}
.section-heading--center .section-heading__eyebrow::before{display:none;}
.section-heading__title{font-size:var(--fs-h2);}
.section-heading--oneline{max-width:none;}
.section-heading__desc{margin-top:var(--sp-4); font-size:var(--fs-lead); color:var(--text-secondary);}
/* Full-size (desktop): keep block titles on one line; descriptions stay at a readable width */
@media (min-width:1025px){
  .section-heading{max-width:none;}
  .section-heading__title{white-space:nowrap;}
  .section-heading__desc{max-width:760px;}
  .section-heading--center .section-heading__desc{margin-inline:auto;}
  .section-heading__desc.desc--twoline{max-width:none; white-space:nowrap;}
}
.eyebrow{display:inline-block; font-size:var(--fs-eyebrow); font-weight:var(--fw-semi); letter-spacing:.16em; text-transform:uppercase; color:var(--primary);}
.eyebrow--stacked{display:block; margin-bottom:.75rem;}

/* ---------------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-semi); line-height:1; padding:.85rem 1.5rem; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer; text-align:center; white-space:nowrap; transition:all var(--dur) var(--ease); letter-spacing:-.01em;}
.btn:focus-visible{outline-offset:3px;}
.btn--primary{background:var(--grad-brand); color:#fff; border:none; box-shadow:0 8px 22px rgba(78,95,210,.30);}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(78,95,210,.40); filter:brightness(1.04);}
.btn--outline{background:var(--bg-white); color:var(--text-primary); border-color:var(--border-strong);}
.btn--outline:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-2px); box-shadow:var(--sh-sm);}
.btn--ghost{background:transparent; color:var(--primary); border-color:transparent; padding-inline:.4rem;}
.btn--lg{padding:1.05rem 1.9rem; font-size:1.02rem;}
.btn--block{display:flex; width:100%;}
.btn__arrow{transition:transform var(--dur) var(--ease);} .btn:hover .btn__arrow{transform:translateX(3px);}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:var(--fw-semi); font-size:var(--fs-sm);}
.link-arrow .arr{transition:transform var(--dur) var(--ease);} .link-arrow:hover .arr{transform:translateX(3px);}

/* ---------------------------------------------------------------------------
   6. HEADER (white)
   --------------------------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); transition:box-shadow var(--dur) var(--ease);}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(20,27,45,.08);}
.nav{display:flex; align-items:center; gap:var(--sp-5); height:var(--header-h); position:relative;}
.nav__logo{display:flex; align-items:center; flex-shrink:0;}
.nav__logo img{height:30px; width:auto; display:block;}
.logo-placeholder{display:inline-flex; align-items:center; height:30px; padding-inline:.7rem; border:1px dashed #ccd3e0; border-radius:var(--r-sm); font-size:.82rem; color:#5B6475; font-weight:600;}
.nav__menu{display:flex; align-items:center; gap:var(--sp-1); list-style:none; margin:0 0 0 var(--sp-4); padding:0;}
.nav__link{display:inline-flex; align-items:center; gap:.3rem; padding:.6rem .8rem; border-radius:var(--r-sm); color:var(--text-primary); font-size:var(--fs-sm); font-weight:var(--fw-medium); cursor:pointer; background:none; border:none; font-family:inherit;}
.nav__link:hover{color:var(--primary); background:var(--primary-soft);}
.nav__link[aria-current="page"]{color:var(--primary); font-weight:var(--fw-semi);}
.nav__caret{transition:transform var(--dur) var(--ease);}
.nav__item--has-menu.is-open .nav__link .nav__caret{transform:rotate(180deg);}
.nav__spacer{flex:1;}
.nav__actions{display:flex; align-items:center; gap:var(--sp-3);}
.lang-switch{position:relative;}
.lang-switch__btn{display:inline-flex; align-items:center; gap:.35rem; background:none; border:1px solid var(--border); border-radius:var(--r-sm); padding:.5rem .7rem; font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-primary); cursor:pointer;}
.lang-switch__btn:hover{border-color:var(--border-strong);}
.lang-switch__menu{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-md); min-width:150px; padding:.35rem; list-style:none; margin:0; opacity:0; visibility:hidden; transform:translateY(-4px); transition:all var(--dur) var(--ease); z-index:120;}
.lang-switch.is-open .lang-switch__menu{opacity:1; visibility:visible; transform:none;}
.lang-switch__menu a{display:block; width:100%; text-align:left; font-size:var(--fs-sm); padding:.55rem .7rem; border-radius:var(--r-sm); color:var(--text-primary);}
.lang-switch__menu a:hover{background:var(--primary-soft);}
.lang-switch__menu a[aria-current="true"]{color:var(--primary); font-weight:var(--fw-semi);}
.nav__toggle{display:none; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center;}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:""; display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.nav__toggle span{position:relative;} .nav__toggle span::before{position:absolute; top:-6px;} .nav__toggle span::after{position:absolute; top:6px;}
.nav__toggle[aria-expanded="true"] span{background:transparent;}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------------------------------------------------------------------------
   7. MEGA MENU
   --------------------------------------------------------------------------- */
.nav__item--has-menu{position:static;}   /* anchor the mega-menu to the nav/container, not the item */
.mega-menu{position:absolute; top:calc(100% + 10px); left:0; right:auto; transform:translateY(-6px); width:min(940px,100%); background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:var(--sp-6); opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); z-index:110;}
.nav__item--has-menu.is-open .mega-menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav__item--has-menu.is-open::after{content:""; position:absolute; top:100%; left:0; right:0; height:14px;}
.mega-menu__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:var(--sp-5); align-items:stretch;}
.mega-col{display:flex; flex-direction:column; min-width:0;}
.mega-col__label{font-size:var(--fs-eyebrow); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:var(--fw-semi); padding-bottom:var(--sp-3); margin-bottom:var(--sp-3); border-bottom:1px solid var(--border);}

/* uniform product card (Trios / Secure Gateway / UniData) — equal height via flex:1 */
.mega-card{flex:1; display:flex; flex-direction:column; gap:.6rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--primary-soft),#fff); transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.mega-card--gw{background:linear-gradient(180deg,var(--data-soft),#fff);}
.mega-card--uni{background:linear-gradient(180deg,var(--ai-soft),#fff);}
a.mega-card:hover{box-shadow:var(--sh-sm); border-color:var(--border-strong);}
.mega-card__head{display:flex; align-items:center; gap:.6rem; color:inherit;}
.mega-card__ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#fff; border:1px solid var(--border); color:var(--primary); flex-shrink:0;}
.mega-card--gw .mega-card__ic{color:var(--data);} .mega-card--uni .mega-card__ic{color:var(--ai);}
.mega-card__name{font-weight:var(--fw-semi); color:var(--text-primary); font-size:1rem; line-height:1.15;}
.mega-card__head .status-dot{margin-left:auto;}
.mega-card__desc{font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; margin:0;}

/* 4 modules in a 2x2 grid inside the Trios card */
.mega-modules{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.5rem; padding-top:.75rem; border-top:1px dashed var(--border);}
.mega-item{display:flex; flex-direction:column; gap:.35rem; padding:.6rem .65rem; border:1px solid var(--border); border-radius:var(--r-md); background:#fff; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.mega-item:hover{background:var(--bg-soft-blue); border-color:var(--border-strong);}
.mega-item__head{display:flex; align-items:center; gap:.5rem;}
.mega-item__ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); flex-shrink:0;}
.mega-item__name{font-size:.86rem; font-weight:var(--fw-semi); color:var(--text-primary); line-height:1.1;}
.mega-item__head .status-dot{margin-left:auto;}
.mega-item__desc{font-size:.74rem; color:var(--text-secondary); line-height:1.4;}

/* compact state indicator: coloured circle + inner dot, no text */
.status-dot{width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; flex-shrink:0; border:1px solid transparent;}
.status-dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.status-dot--ready{color:var(--st-ready); background:var(--st-ready-soft); border-color:rgba(16,162,119,.30);}
.status-dot--dev{color:var(--st-dev); background:var(--st-dev-soft); border-color:rgba(180,121,26,.30);}
.status-dot--roadmap{color:var(--st-roadmap); background:var(--st-roadmap-soft); border-color:rgba(92,104,128,.30);}
.status-dot--platform{color:var(--st-platform); background:var(--st-platform-soft); border-color:rgba(78,95,210,.30);}

/* status legend (bottom of the mega menu) */
.mega-legend{display:flex; align-items:center; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; margin-top:var(--sp-5);}
.mega-legend__title{font-size:var(--fs-xs); color:var(--text-muted); font-weight:var(--fw-medium);}
.mega-link{display:flex; gap:.75rem; align-items:flex-start; padding:.6rem .65rem; border-radius:var(--r-md); transition:background var(--dur) var(--ease);}
.mega-link:hover{background:var(--bg-soft-blue);}
.mega-link__icon{flex-shrink:0; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary);}
.mega-link__icon--gw{background:var(--data-soft); color:var(--data);}
.mega-link__icon--uni{background:var(--ai-soft); color:var(--ai);}
.mega-link__body{min-width:0;}
.mega-link__title{font-weight:var(--fw-semi); color:var(--text-primary); font-size:.95rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.mega-link__desc{font-size:var(--fs-xs); color:var(--text-secondary); margin-top:2px; line-height:1.45;}
.mega-link--feature{flex-direction:column; background:linear-gradient(180deg,var(--primary-soft),#fff); border:1px solid var(--border); gap:.5rem;}
.mega-link--feature .mega-link__title{font-size:1.05rem;}
.mega-menu__foot{margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;}
.mega-menu__foot p{font-size:var(--fs-sm); color:var(--text-secondary); margin:0;}

/* ---------------------------------------------------------------------------
   8. STATUS BADGE
   --------------------------------------------------------------------------- */
.status-badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:var(--fw-semi); padding:.25rem .6rem; border-radius:var(--r-pill); white-space:nowrap; line-height:1.3;}
.status-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.status-badge--ready{color:var(--st-ready); background:var(--st-ready-soft);}
.status-badge--dev{color:var(--st-dev); background:var(--st-dev-soft);}
.status-badge--roadmap{color:var(--st-roadmap); background:var(--st-roadmap-soft);}
.status-badge--platform{color:var(--st-platform); background:var(--st-platform-soft);}

/* ---------------------------------------------------------------------------
   9. HERO (light aurora)
   --------------------------------------------------------------------------- */
.hero{position:relative; padding-block:clamp(3.5rem,7vw,7rem) clamp(3.5rem,7vw,7.5rem); overflow:hidden;
  background:
    radial-gradient(820px 520px at 84% -12%, rgba(124,92,230,.16), transparent 58%),
    radial-gradient(680px 460px at 66% 2%, rgba(78,95,210,.14), transparent 55%),
    radial-gradient(720px 520px at 2% 108%, rgba(11,181,196,.12), transparent 60%),
    var(--bg-white);}
.hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(20,27,45,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,27,45,.035) 1px, transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 70%);}
.hero .container{position:relative; z-index:1;}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;}
.hero--simple{padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem);}
.hero--simple .hero__grid{grid-template-columns:1fr;} .hero--simple .hero__lead{margin-inline:0;}
/* Services hero: large image with copy overlapping its left third (left region blurred for legibility) */
.hero--svc{position:relative; overflow:hidden;}
.hero--svc__media{position:relative; margin:0; display:block;}
.hero--svc__media img{display:block; width:100%; height:auto;}
.hero--svc__scrim{display:none;}
@media (min-width:1025px){
  .hero--svc{padding-block:0; min-height:540px; display:flex; align-items:center;}
  .hero--svc__media{position:absolute; inset:0; border-radius:0; box-shadow:none;}
  .hero--svc__media img{width:100%; height:100%; object-fit:cover; object-position:82% center;}
  .hero--svc__scrim{display:block; position:absolute; inset:0; width:52%;
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    background:linear-gradient(90deg, rgba(247,249,252,.95) 0%, rgba(247,249,252,.92) 60%, rgba(247,249,252,.6) 82%, rgba(247,249,252,0) 100%);
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 77%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 0%, #000 77%, transparent 100%);}
  .hero--svc .container{position:relative; z-index:2; width:100%;}
  .hero--svc__copy{max-width:520px;}
  .hero--svc .hero__title{white-space:nowrap; font-size:clamp(2rem,2.6vw,2.5rem);}
}
.br-lg{display:none;}
@media (min-width:1025px){ .br-lg{display:inline;} }
@media (min-width:1025px){ .hero__lead--2l{max-width:none; white-space:nowrap;} }
@media (min-width:1025px){ .section-heading__desc--nowrap-lg{max-width:none; white-space:nowrap;} }

/* Products: colour-coded product groups (Trios / Secure Gateway / UniData) */
.prod-groups{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); align-items:start; margin-top:var(--sp-7);}
.prod-group{display:flex; flex-direction:column; border:1px solid var(--border); border-top:4px solid var(--pg-color); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-sm); overflow:hidden;}
.prod-group--trios{--pg-color:var(--security); --pg-soft:var(--security-soft);}
.prod-group--gw{--pg-color:var(--data); --pg-soft:var(--data-soft);}
.prod-group--uni{--pg-color:var(--ai); --pg-soft:var(--ai-soft);}
.prod-group__head{padding:clamp(1rem,2vw,1.35rem); background:var(--pg-soft); border-bottom:1px solid var(--border);}
.prod-group__name{display:block; font-weight:var(--fw-bold); font-size:1.15rem; color:var(--pg-color); letter-spacing:-.01em;}
.prod-group__tag{display:block; margin-top:.3rem; font-size:var(--fs-eyebrow); font-weight:var(--fw-semi); letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary);}
.prod-group__list{list-style:none; margin:0; padding:clamp(.5rem,1vw,.8rem); flex:1;}
.prod-group__item{display:block; padding:.65rem .6rem; border-radius:var(--r-sm); color:inherit;}
.prod-group__list li + li{border-top:1px solid var(--border-soft);}
a.prod-group__item{transition:background var(--dur) var(--ease);}
a.prod-group__item:hover{background:var(--pg-soft);}
.prod-group__item strong{display:block; color:var(--text-primary); font-weight:var(--fw-semi);}
.prod-group__item span{display:block; font-size:.92rem; color:var(--text-secondary); margin-top:.15rem;}
.prod-group__item--plain span{color:var(--text-primary); font-size:1rem;}
.prod-group__foot{margin:0; padding:clamp(.6rem,1.2vw,1rem) clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.35rem);}
.prod-group__foot .link-arrow{color:var(--pg-color);}
@media (max-width:860px){ .prod-groups{grid-template-columns:1fr;} }
@media (max-width:1024px){
  .hero--svc{display:flex; flex-direction:column-reverse;}
  .hero--svc__media{margin-top:1.4rem; border-radius:20px; overflow:hidden; box-shadow:var(--sh-md);}
}
.hero__eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:var(--fs-eyebrow); font-weight:var(--fw-semi); letter-spacing:.14em; text-transform:uppercase; color:var(--primary); background:rgba(255,255,255,.7); border:1px solid var(--border); padding:.45rem .9rem; border-radius:var(--r-pill); margin-bottom:var(--sp-5); box-shadow:var(--sh-xs); backdrop-filter:blur(4px);}
.hero__eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px var(--cyan-soft);}
.hero__eyebrow--trios::before{background:var(--security); box-shadow:0 0 0 4px var(--security-soft);}
.hero__eyebrow--gw::before{background:var(--data); box-shadow:0 0 0 4px var(--data-soft);}
.hero__eyebrow--uni::before{background:var(--ai); box-shadow:0 0 0 4px var(--ai-soft);}
.hero__eyebrow--trios{color:var(--security);} .hero__eyebrow--gw{color:var(--data);} .hero__eyebrow--uni{color:var(--ai);}
.hero__title{font-size:var(--fs-hero); line-height:1.05; letter-spacing:-.03em;}
.hero__lead{margin-top:var(--sp-5); font-size:var(--fs-lead); color:var(--text-secondary); max-width:54ch;}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-7);}
.hero__proof{margin-top:var(--sp-6); font-size:var(--fs-sm); color:var(--text-muted); padding-top:var(--sp-5); border-top:1px solid var(--border);}
.breadcrumb{font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--sp-4);}
.breadcrumb a{color:var(--text-secondary);} .breadcrumb span{color:var(--border-strong); margin:0 .4rem;}
.hero--trios{background:radial-gradient(820px 520px at 84% -12%, rgba(16,162,119,.16), transparent 58%), radial-gradient(600px 420px at 8% 108%, rgba(78,95,210,.10), transparent 60%), var(--bg-white);}
.hero--gw{background:radial-gradient(820px 520px at 84% -12%, rgba(46,139,216,.18), transparent 58%), radial-gradient(600px 420px at 8% 108%, rgba(11,181,196,.10), transparent 60%), var(--bg-white);}
.hero--uni{background:radial-gradient(820px 520px at 84% -12%, rgba(124,92,230,.18), transparent 58%), radial-gradient(600px 420px at 8% 108%, rgba(78,95,210,.10), transparent 60%), var(--bg-white);}

/* ---------------------------------------------------------------------------
   10. GLASSY APP-WINDOW MOCK + hero floats
   --------------------------------------------------------------------------- */
.hero__visual{position:relative;}
.mock{position:relative; background:linear-gradient(180deg,#FFFFFF,#F3F6FE); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-lg), 0 0 60px rgba(78,95,210,.12); overflow:hidden;}
.mock::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}
.mock__bar{display:flex; align-items:center; gap:.45rem; padding:.7rem .95rem; background:var(--bg-page); border-bottom:1px solid var(--border);}
.mock__bar i{width:10px; height:10px; border-radius:50%; background:var(--border-strong);}
.mock__bar .mock__addr{margin-left:.6rem; height:18px; flex:1; max-width:60%; border-radius:var(--r-pill); background:#fff; border:1px solid var(--border);}
.mock__body{display:grid; grid-template-columns:78px 1fr; min-height:280px;}
.mock__side{border-right:1px solid var(--border); background:var(--bg-page); padding:.9rem .7rem; display:flex; flex-direction:column; gap:.7rem;}
.mock__side i{display:block; height:10px; border-radius:var(--r-pill); background:var(--border);}
.mock__side i:first-child{background:var(--grad-brand); opacity:.9;}
.mock__side i:nth-child(2){width:70%;} .mock__side i:nth-child(3){width:85%;} .mock__side i:nth-child(4){width:60%;} .mock__side i:nth-child(5){width:78%;}
.mock__main{padding:1.1rem 1.15rem; display:flex; flex-direction:column; gap:.85rem;}
.mock__row{height:12px; border-radius:var(--r-pill); background:#E7EBF4;}
.mock__row--title{height:16px; width:42%; background:#c7cfe0;}
.mock__row--w70{width:70%;} .mock__row--w85{width:85%;} .mock__row--w55{width:55%;}
.mock__cards{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.3rem;}
.mock__cardlet{border:1px solid var(--border); border-radius:var(--r-md); padding:.8rem; display:flex; flex-direction:column; gap:.5rem; background:#fff;}
.mock__chip{width:26px; height:26px; border-radius:8px;}
.mock__chip--a{background:var(--security-soft); box-shadow:0 0 16px rgba(16,162,119,.28);}
.mock__chip--b{background:var(--data-soft); box-shadow:0 0 16px rgba(46,139,216,.28);}
.mock__chip--c{background:var(--ai-soft); box-shadow:0 0 16px rgba(124,92,230,.28);}
.mock__chip--d{background:var(--primary-soft); box-shadow:0 0 16px rgba(78,95,210,.28);}
.mock__cardlet i{height:9px; border-radius:var(--r-pill); background:#E7EBF4;} .mock__cardlet i:last-child{width:65%;}

.hero-float{position:absolute; display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.9); border:1px solid var(--border); border-radius:var(--r-pill); padding:.5rem .9rem .5rem .55rem; box-shadow:var(--sh-md); font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--text-primary); backdrop-filter:blur(8px);}
.hero-float__dot{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;}
.hero-float--trios{top:-14px; left:-18px;} .hero-float--trios .hero-float__dot{background:var(--security-soft); color:var(--security);}
.hero-float--gw{bottom:44px; left:-26px;} .hero-float--gw .hero-float__dot{background:var(--data-soft); color:var(--data);}
.hero-float--uni{bottom:-14px; right:-14px;} .hero-float--uni .hero-float__dot{background:var(--ai-soft); color:var(--ai);}
@media (prefers-reduced-motion:no-preference){
  .hero-float{animation:floaty 5s var(--ease) infinite;}
  .hero-float--gw{animation-delay:.8s;} .hero-float--uni{animation-delay:1.6s;}
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
}
@media (max-width:1024px){.hero-float--trios{left:8px;}.hero-float--gw{left:0;}.hero-float--uni{right:0;}}
@media (max-width:560px){.hero-float{position:static; margin:.4rem .4rem 0 0; display:inline-flex; animation:none;} .hero__visual{margin-top:1.5rem;}}

/* ---------------------------------------------------------------------------
   11. IMAGE SLOT
   --------------------------------------------------------------------------- */
.img-slot{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);
  background:
    radial-gradient(420px 240px at 82% 0%, rgba(124,92,230,.16), transparent 60%),
    radial-gradient(360px 220px at 8% 100%, rgba(11,181,196,.14), transparent 60%),
    linear-gradient(180deg,#FFFFFF,#F2F5FD);
  box-shadow:var(--sh-md);}
.img-slot--16x9{aspect-ratio:16/9;} .img-slot--4x3{aspect-ratio:4/3;} .img-slot--1x1{aspect-ratio:1/1;}
.img-slot__inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; padding:var(--sp-6);}
.img-slot__icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:#fff; border:1px solid var(--border); color:var(--primary); box-shadow:var(--sh-xs);}
.img-slot__label{font-size:var(--fs-sm); color:var(--text-primary); font-weight:var(--fw-semi);}
.img-slot__hint{font-size:var(--fs-xs); color:var(--text-muted); max-width:34ch;}
.img-slot::after{content:""; position:absolute; inset:12px; border:1.5px dashed var(--border-strong); border-radius:calc(var(--r-lg) - 6px); pointer-events:none;}

/* ---------------------------------------------------------------------------
   11b. MEDIA FRAME — real product screenshots (image already has its own chrome)
   --------------------------------------------------------------------------- */
.media-frame{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow:var(--sh-lg), 0 0 50px rgba(78,95,210,.10); line-height:0;}
.media-frame img{width:100%; height:auto; display:block;}
.section--dark .media-frame{border-color:var(--border-strong); background:#0C1430; box-shadow:var(--sh-lg), 0 0 60px rgba(90,108,240,.30);}
.hero__visual .media-frame{box-shadow:var(--sh-lg), 0 0 70px rgba(78,95,210,.16);}

/* ---------------------------------------------------------------------------
   12. SCREENSHOT FRAME (glassy light)
   --------------------------------------------------------------------------- */
.screenshot-frame{position:relative; border-radius:var(--r-lg); border:1px solid var(--border); background:linear-gradient(180deg,#FFFFFF,#F3F6FE); box-shadow:var(--sh-lg), 0 0 50px rgba(78,95,210,.10); overflow:hidden;}
.screenshot-frame__bar{display:flex; align-items:center; gap:.45rem; padding:.7rem .95rem; background:var(--bg-page); border-bottom:1px solid var(--border);}
.screenshot-frame__dot{width:10px; height:10px; border-radius:50%; background:var(--border-strong);}
.screenshot-frame__body{position:relative; aspect-ratio:16/10; display:grid; grid-template-columns:78px 1fr;}
.screenshot-frame__label{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--text-primary); background:rgba(255,255,255,.92); border:1px solid var(--border); padding:.55rem 1rem; border-radius:var(--r-pill); box-shadow:var(--sh-sm); backdrop-filter:blur(4px); z-index:2; white-space:nowrap;}
.screenshot-frame__label svg{color:var(--primary);}

/* ---------------------------------------------------------------------------
   13. CARDS
   --------------------------------------------------------------------------- */
.card{background:var(--bg-white); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-6); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); position:relative;}
.card--hover:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border);}
.card__icon{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(150deg,var(--primary-soft),#fff); color:var(--primary); margin-bottom:var(--sp-5); box-shadow:inset 0 0 0 1px rgba(78,95,210,.08);}
.card__title{font-size:var(--fs-h3); margin-bottom:var(--sp-3);}
.card__text{color:var(--text-secondary); font-size:var(--fs-sm); line-height:1.6;}
.card__cta{margin-top:var(--sp-5);}
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
.problem-card{display:flex; flex-direction:column;}
.problem-card .card__cta{margin-top:auto; padding-top:var(--sp-5);}
.problem-card--trios{border-top:3px solid var(--security);} .problem-card--gw{border-top:3px solid var(--data);} .problem-card--uni{border-top:3px solid var(--ai);}
.problem-card--trios .card__icon{background:linear-gradient(150deg,var(--security-soft),#fff); color:var(--security);}
.problem-card--gw .card__icon{background:linear-gradient(150deg,var(--data-soft),#fff); color:var(--data);}
.problem-card--uni .card__icon{background:linear-gradient(150deg,var(--ai-soft),#fff); color:var(--ai);}
.problem-card--trios .link-arrow{color:var(--security);} .problem-card--gw .link-arrow{color:var(--data);} .problem-card--uni .link-arrow{color:var(--ai);}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);}
.feature-grid--3{grid-template-columns:repeat(3,1fr);} .feature-grid--2{grid-template-columns:repeat(2,1fr);}
.feature-grid--auto{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.feature-grid--auto .feature-card{padding-left:1rem; padding-right:1rem;}
.feature-card{padding:var(--sp-6);}
.feature-card .card__icon{width:44px; height:44px;}
.feature-card h4{font-size:1.05rem; margin-bottom:var(--sp-3); color:var(--text-primary);}
.feature-card p{font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.6;}
.feature-card__num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--primary-soft); font-size:.78rem; font-weight:var(--fw-bold); color:var(--primary); margin-bottom:var(--sp-4);}

/* ---------------------------------------------------------------------------
   14. PORTFOLIO
   --------------------------------------------------------------------------- */
.portfolio{display:grid; gap:var(--sp-5);}
.portfolio__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);}
.portfolio-flagship{position:relative; background:radial-gradient(560px 300px at 88% 0%, rgba(16,162,119,.12), transparent 60%), linear-gradient(180deg,#fff,#F1FAF6); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.5rem); overflow:hidden;}
.portfolio-flagship__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-6); align-items:center;}
.portfolio-flagship__tag{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-eyebrow); font-weight:var(--fw-semi); letter-spacing:.1em; text-transform:uppercase; color:var(--security); margin-bottom:var(--sp-3);}
.portfolio-flagship h3{font-size:clamp(1.4rem,2.2vw,1.9rem);}
.portfolio-flagship__desc{color:var(--text-secondary); margin-top:var(--sp-3);}
.portfolio-flagship__modules{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-5);}
.module-chip{display:inline-flex; flex-direction:column; gap:.3rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:.7rem .9rem; min-width:150px;}
.module-chip__name{font-weight:var(--fw-semi); color:var(--text-primary); font-size:.95rem;}
.portfolio-secondary{border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.25rem); border:1px solid var(--border); display:flex; flex-direction:column;}
.portfolio-secondary--gw{background:radial-gradient(520px 260px at 85% 0%, rgba(46,139,216,.12), transparent 60%), linear-gradient(180deg,#fff,#EFF6FD);}
.portfolio-secondary--uni{background:radial-gradient(520px 260px at 85% 0%, rgba(124,92,230,.14), transparent 60%), linear-gradient(180deg,#fff,#F4EFFD);}
.portfolio-secondary__tag{font-size:var(--fs-eyebrow); font-weight:var(--fw-semi); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-3);}
.portfolio-secondary--gw .portfolio-secondary__tag{color:var(--data);} .portfolio-secondary--uni .portfolio-secondary__tag{color:var(--ai);}
.portfolio-secondary h3{font-size:var(--fs-h3);}
.portfolio-secondary__sub{font-weight:var(--fw-semi); color:var(--text-primary); font-size:.95rem; margin-top:var(--sp-2);}
.portfolio-secondary p{color:var(--text-secondary); font-size:var(--fs-sm); margin-top:var(--sp-3);}
.portfolio-secondary .link-arrow{margin-top:auto; padding-top:var(--sp-5);}
.portfolio-secondary--gw .link-arrow{color:var(--data);} .portfolio-secondary--uni .link-arrow{color:var(--ai);}

/* ---------------------------------------------------------------------------
   15. DIAGRAMS (flat light, soft glow)
   --------------------------------------------------------------------------- */
.diagram-card{background:linear-gradient(180deg,#fff,#F5F7FD); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--sh-sm);}
.diagram-node{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.2rem; padding:.8rem 1.05rem; border-radius:var(--r-md); border:1.5px solid; background:#fff; font-weight:var(--fw-semi); font-size:var(--fs-sm); min-width:112px;}
.diagram-node small{font-weight:var(--fw-regular); font-size:var(--fs-xs); color:var(--text-muted);}
.diagram-node--app{border-color:var(--d-app); color:var(--d-app); background:var(--primary-soft); box-shadow:0 6px 18px rgba(78,95,210,.14);}
.diagram-node--security{border-color:var(--d-security); color:var(--d-security); background:var(--security-soft); box-shadow:0 6px 18px rgba(16,162,119,.14);}
.diagram-node--integ{border-color:var(--d-integ); color:var(--d-integ); background:var(--data-soft); box-shadow:0 6px 18px rgba(46,139,216,.14);}
.diagram-node--ai{border-color:var(--d-ai); color:var(--d-ai); background:var(--ai-soft); box-shadow:0 6px 18px rgba(124,92,230,.14);}
.diagram-node--external{border-color:var(--d-external); color:var(--text-secondary); background:var(--bg-page);}
.diagram-node--plain{border-color:var(--border-strong); color:var(--text-primary);}
.diagram-flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.75rem;}
.diagram-arrow{color:var(--text-muted); font-size:1.25rem; line-height:1; flex-shrink:0;}
.flow-vert{display:flex; flex-direction:column; align-items:center; gap:.5rem;}
.trust-zone{border:2px dashed var(--d-boundary); border-radius:var(--r-md); padding:var(--sp-5); position:relative;}
.trust-zone__label{position:absolute; top:-11px; left:16px; background:var(--bg-white); padding:0 .5rem; font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--d-boundary); letter-spacing:.04em;}
.workflow-strip{display:flex; flex-wrap:wrap;}
.workflow-step{flex:1 1 150px; padding:var(--sp-4); background:#fff; border:1px solid var(--border); border-radius:var(--r-md); margin:.35rem;}
.workflow-step__num{width:26px; height:26px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); margin-bottom:var(--sp-3); box-shadow:0 4px 12px rgba(78,95,210,.3);}
.workflow-step h4{font-size:.95rem; margin-bottom:.2rem;} .workflow-step p{font-size:var(--fs-xs); color:var(--text-secondary);}
.lifecycle{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; justify-content:center;}
.lifecycle__step{background:var(--security-soft); color:var(--security); border-radius:var(--r-pill); padding:.55rem 1rem; font-weight:var(--fw-semi); font-size:var(--fs-sm);}
.lifecycle__arrow{color:var(--text-muted);}
.stack-diagram{display:flex; flex-direction:column; gap:.5rem;}
.stack-layer{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); background:#fff; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.stack-layer__name{font-weight:var(--fw-semi); color:var(--text-primary);} .stack-layer__desc{font-size:var(--fs-sm); color:var(--text-secondary);}
.stack-layer--connect{border-left:4px solid var(--d-external);} .stack-layer--prepare{border-left:4px solid var(--d-integ);}
.stack-layer--govern{border-left:4px solid var(--d-security);} .stack-layer--activate{border-left:4px solid var(--d-ai);}
.layer-stack{display:flex; flex-direction:column; gap:.5rem; max-width:520px; margin-inline:auto;}
.layer-stack__item{display:flex; align-items:flex-start; gap:.75rem; padding:.85rem 1.1rem; border-radius:var(--r-md); background:var(--data-soft); border:1px solid #cfe6f7; color:#1c2740; font-size:var(--fs-sm);}
.layer-stack__item b{color:#0e3a5f;}
.layer-stack__num{width:24px; height:24px; border-radius:50%; background:var(--data); color:#fff; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); flex-shrink:0;}
.layer-stack__result{margin-top:.3rem; padding:1rem 1.1rem; border-radius:var(--r-md); background:linear-gradient(120deg,var(--data),var(--cyan)); color:#fff; text-align:center; font-weight:var(--fw-bold); box-shadow:0 12px 30px rgba(46,139,216,.25);}
.integration-strip{display:flex; align-items:center; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-5); background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);}
.integration-strip__item{background:var(--bg-page); border:1px solid var(--border); border-radius:var(--r-sm); padding:.5rem .9rem; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary);}
.pill-row{display:flex; flex-wrap:wrap; gap:.5rem;}
.pill{background:#fff; border:1px solid var(--border); border-radius:var(--r-pill); padding:.4rem .9rem; font-size:var(--fs-sm); color:var(--text-secondary); font-weight:var(--fw-medium);}

/* ---------------------------------------------------------------------------
   16. TABLES
   --------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff;}
.comparison-table{width:100%; border-collapse:collapse; min-width:560px;}
.comparison-table th,.comparison-table td{text-align:left; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); font-size:var(--fs-sm); color:var(--text-secondary);}
.comparison-table thead th{background:var(--bg-soft-blue); color:var(--text-primary); font-weight:var(--fw-semi); font-size:var(--fs-xs); letter-spacing:.04em;}
.comparison-table tbody tr:last-child td{border-bottom:none;}
.comparison-table tbody tr:hover{background:var(--bg-page);}
.comparison-table td strong{color:var(--text-primary);}
/* Problem comparison table (TriMessenger) */
.comparison-table--problem thead th{text-transform:none; font-size:var(--fs-sm); letter-spacing:0;}
.comparison-table--problem thead th:first-child{background:#edf0ff; color:var(--primary-strong);}
.comparison-table--problem thead th:last-child{background:#fbe9ec; color:#b8324a;}
.comparison-table--problem td:first-child{width:38%;}
.comparison-table--problem td strong{color:var(--primary-strong);}

/* E2EE inline banner (feature section) */
.e2ee-line{display:flex; align-items:center; justify-content:center; gap:.6rem; width:max-content; max-width:100%; margin-inline:auto; padding:.75rem 1.5rem; border-radius:999px; background:var(--grad-brand); color:#fff; font-weight:var(--fw-semi); font-size:var(--fs-sm); box-shadow:0 10px 26px rgba(78,95,210,.28); text-align:center;}
.e2ee-line svg{flex-shrink:0;}

/* E2EE architecture diagram (redrawn) */
.e2ee__row{display:flex; align-items:stretch; justify-content:center; gap:.6rem;}
.e2ee__node{flex:1 1 0; max-width:320px; display:flex; flex-direction:column; gap:.55rem; padding:1.1rem; border-radius:var(--r-lg); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);}
.e2ee__label{font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.05em; text-transform:uppercase; color:#c3caff;}
.e2ee__step{text-align:center; padding:.62rem .5rem; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:var(--fw-semi);}
.e2ee__step--plain{background:rgba(124,92,230,.20); color:#e4e6ff;}
.e2ee__step--enc{background:var(--primary); color:#fff;}
.e2ee__step--cipher{background:#161d2b; color:#c3c9d6; border:1px solid rgba(255,255,255,.12);}
.e2ee__down{align-self:center; color:rgba(255,255,255,.45); font-size:1rem; line-height:1;}
.e2ee__node--server{justify-content:center; align-items:center; text-align:center; background:rgba(255,255,255,.035);}
.e2ee__node--server .e2ee__label{align-self:center; background:#101524; color:#fff; padding:.5rem 1.1rem; border-radius:var(--r-md); letter-spacing:.1em;}
.e2ee__servertext{color:#c3c9d6; font-size:var(--fs-sm);}
.e2ee__no{color:#ff9aa6; font-weight:var(--fw-bold); font-size:var(--fs-sm);}
.e2ee__link{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-width:74px;}
.e2ee__arrow{color:rgba(255,255,255,.6); font-size:1.5rem; line-height:1;}
.e2ee__linktext{font-size:var(--fs-xs); color:rgba(255,255,255,.5); font-style:italic; white-space:nowrap;}
.e2ee__summary{margin-top:1.25rem; padding:1rem 1.25rem; border-radius:var(--r-md); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; text-align:center; font-weight:var(--fw-semi); font-size:var(--fs-sm);}
@media (max-width:860px){
  .e2ee__row{flex-direction:column; align-items:stretch;}
  .e2ee__node{max-width:none;}
  .e2ee__link{flex-direction:row;}
  .e2ee__arrow{transform:rotate(90deg);}
}

/* Keep a heading/line on one line at full size (wraps normally below) */
@media (min-width:1025px){ .nowrap-lg{white-space:nowrap;} }
.cta-panel h2.nowrap-lg{max-width:none;}
/* Hero title forced onto 3 lines: nowrap each line, slightly smaller to fit the column */
@media (min-width:1025px){
  .hero__title--3l{white-space:nowrap; font-size:clamp(2.5rem,3.6vw,3.1rem);}
  .section-heading__desc.desc--wide{max-width:940px;}
}

/* TriMeet lifecycle — numbered step flow */
.meet-steps{display:flex; flex-wrap:wrap; gap:.7rem; align-items:stretch; justify-content:center;}
.meet-step{flex:1 1 150px; max-width:200px; display:flex; flex-direction:column; gap:.5rem; padding:1rem .9rem; border-radius:var(--r-lg); background:var(--bg-white); border:1px solid var(--border); box-shadow:var(--sh-sm); position:relative;}
.meet-step__num{width:30px; height:30px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-bold);}
.meet-step__label{font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--text-primary); line-height:1.3;}
.meet-step--last{background:var(--security-soft); border-color:transparent;}
.meet-step--last .meet-step__num{background:var(--security);}
@media (max-width:640px){ .meet-step{flex:1 1 100%; max-width:none; flex-direction:row; align-items:center;} }

/* TriMeet integration — existing systems → TriConnect → TriMeet */
.integ-flow{display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;}
.integ-flow__panel{flex:1 1 280px; max-width:420px; padding:1.2rem; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--bg-white); box-shadow:var(--sh-sm);}
.integ-flow__title{display:block; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:.75rem;}
.integ-flow__chips{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.integ-flow__chip{padding:.55rem .6rem; border-radius:var(--r-md); background:var(--bg-soft-blue); color:var(--text-primary); font-size:var(--fs-xs); font-weight:var(--fw-medium); text-align:center;}
.integ-flow__arrow{color:var(--primary); font-size:1.6rem; line-height:1; flex:0 0 auto;}
.integ-flow__stack{flex:0 0 auto; display:flex; flex-direction:column; gap:.7rem;}
.integ-flow__node{min-width:190px; text-align:center; padding:.9rem 1.1rem; border-radius:var(--r-lg); font-weight:var(--fw-bold); box-shadow:var(--sh-sm);}
.integ-flow__node small{display:block; font-weight:var(--fw-medium); font-size:var(--fs-xs); opacity:.85; margin-top:.15rem;}
.integ-flow__node--connect{background:var(--security-soft); color:var(--security);}
.integ-flow__node--meet{background:var(--grad-brand); color:#fff;}
.integ-flow__caption{margin-top:1.25rem; text-align:center; color:var(--text-secondary); font-size:var(--fs-sm);}
@media (max-width:860px){ .integ-flow__arrow{transform:rotate(90deg);} }
/* Trios box: TriConnect shown as a component inside Trios */
.trios-box{flex:0 0 auto; width:300px; max-width:100%; padding:1rem; border-radius:var(--r-lg); background:linear-gradient(135deg,#f3f0ff,#eaf0ff); border:1.5px solid var(--primary); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:.55rem;}
.trios-box__label{font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--primary-strong); text-align:center;}
.trios-box__connect{text-align:center; padding:.7rem .6rem; border-radius:var(--r-md); background:var(--security-soft); color:var(--security); font-weight:var(--fw-bold);}
.trios-box__connect small{display:block; font-weight:var(--fw-medium); font-size:var(--fs-xs); opacity:.9; margin-top:.1rem;}
.trios-box__down{text-align:center; color:var(--primary); font-size:1.2rem; line-height:1;}
.trios-box__ws{text-align:center; padding:.8rem .6rem; border-radius:var(--r-md); background:var(--grad-brand); color:#fff; font-weight:var(--fw-semi); font-size:var(--fs-sm);}

/* Secure Gateway — integration over API */
.api-flow{display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap;}
.api-flow__app{flex:1 1 230px; max-width:290px; text-align:center; padding:1.1rem; border-radius:var(--r-lg); background:var(--bg-white); border:1px solid var(--border); box-shadow:var(--sh-sm);}
.api-flow__app strong{display:block; color:var(--text-primary); font-size:var(--fs-base);}
.api-flow__app small{display:block; color:var(--data); font-size:var(--fs-xs); font-weight:var(--fw-semi); margin-top:.35rem;}
.api-flow__gw{flex:0 0 auto; min-width:170px; text-align:center; padding:1.2rem 1.4rem; border-radius:var(--r-lg); background:var(--grad-brand); color:#fff; font-weight:var(--fw-bold); box-shadow:0 10px 26px rgba(78,95,210,.28);}
.api-flow__link{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.15rem; color:var(--primary);}
.api-flow__link span{font-size:1.5rem; line-height:1;}
.api-flow__link small{font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.08em;}
@media (max-width:860px){ .api-flow__link span{transform:rotate(90deg);} }

/* Secure Gateway — network isolation diagram */
.netiso{display:flex; align-items:stretch; justify-content:center; gap:.4rem;}
.netiso__zone{flex:1 1 0; max-width:400px; padding:1.1rem; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--bg-white); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:.7rem;}
.netiso__ztitle{align-self:flex-start; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.06em; color:#fff; padding:.4rem .9rem; border-radius:var(--r-md);}
.netiso__zone--a .netiso__ztitle{background:var(--primary);}
.netiso__zone--b .netiso__ztitle{background:var(--data);}
.netiso__box{padding:.85rem; border-radius:var(--r-md); text-align:center; font-weight:var(--fw-semi); font-size:var(--fs-sm); background:var(--bg-soft-blue); color:var(--text-primary);}
.netiso__box--gw{background:#1c2740; color:#fff; margin-top:auto;}
.netiso__mid{position:relative; flex:0 0 210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; padding:0 .5rem;}
.netiso__mid::before{content:""; position:absolute; top:6px; bottom:6px; left:50%; border-left:2px dashed #c0392b;}
.netiso__badge{position:relative; background:#c0392b; color:#fff; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.06em; padding:.4rem .9rem; border-radius:999px;}
.netiso__transfer{position:relative; background:#1c2740; color:#fff; padding:.8rem 1rem; border-radius:var(--r-md); text-align:center; font-weight:var(--fw-semi); font-size:var(--fs-sm); max-width:190px;}
.netiso-benefits{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:1.4rem;}
.netiso-benefits__item{display:flex; align-items:flex-start; gap:.5rem; padding:.8rem .9rem; border-radius:var(--r-md); background:var(--bg-soft-blue); font-size:var(--fs-sm); color:var(--text-primary);}
.netiso-benefits__item svg{flex-shrink:0; color:var(--primary); margin-top:2px;}
@media (max-width:900px){
  .netiso{flex-direction:column; align-items:stretch;}
  .netiso__zone{max-width:none;}
  .netiso__mid{flex:0 0 auto; padding:.8rem 0;}
  .netiso__mid::before{top:50%; bottom:auto; left:6px; right:6px; width:auto; border-left:none; border-top:2px dashed #c0392b;}
  .netiso-benefits{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){ .netiso-benefits{grid-template-columns:1fr;} }

/* UniData hero diagram */
.uni-hero{background:var(--bg-white); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.4rem; box-shadow:var(--sh-md); display:flex; flex-direction:column; align-items:center; gap:.6rem;}
.uni-hero__cap{align-self:stretch; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.08em; color:var(--text-secondary); text-align:center;}
.uni-hero__grid{display:grid; grid-template-columns:1fr 1fr; gap:.55rem; width:100%;}
.uni-hero__grid--out{grid-template-columns:repeat(3,1fr);}
.uni-hero__chip{padding:.6rem .5rem; border-radius:var(--r-md); background:var(--bg-soft-blue); color:var(--text-primary); font-size:var(--fs-xs); font-weight:var(--fw-semi); text-align:center;}
.uni-hero__arrow{color:var(--ai); font-size:1.3rem; line-height:1;}
.uni-hero__core{width:100%; text-align:center; padding:1rem; border-radius:var(--r-lg); background:linear-gradient(120deg,var(--ai),var(--primary)); color:#fff; font-weight:var(--fw-bold); font-size:1.15rem; box-shadow:0 10px 26px rgba(124,92,230,.28);}
.uni-hero__core small{display:block; font-weight:var(--fw-medium); font-size:var(--fs-xs); opacity:.9; margin-top:.2rem;}
.uni-hero__out{padding:.6rem .35rem; border-radius:var(--r-md); background:var(--ai-soft); color:var(--ai); font-size:var(--fs-xs); font-weight:var(--fw-bold); text-align:center;}

/* Pricing: price unit, sub-notes, note, app-store buttons */
.pricing-card__unit{font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); margin-left:.15rem;}
.pricing-card__pricemeta{margin-top:.6rem; padding:.6rem .75rem; border-radius:var(--r-md); background:var(--bg-soft-blue); display:flex; flex-direction:column; gap:.2rem;}
.pricing-card__metatop{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--text-primary);}
.pricing-card__metatop svg{flex-shrink:0; color:var(--primary);}
.pricing-card__metabot{font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.4;}
.nowrap{white-space:nowrap;}
.pricing-note{max-width:760px; margin:1.75rem auto 0; text-align:center; font-size:var(--fs-sm); color:var(--text-secondary);}
.pricing-note a{color:var(--primary); font-weight:var(--fw-semi);}
@media (min-width:1025px){ .pricing-note{max-width:none; white-space:nowrap;} }
.store-cta{margin-top:2.5rem; display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;}
.store-cta__label{font-size:var(--fs-lead); font-weight:var(--fw-semi); color:var(--text-primary);}
.store-badges{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}
.store-badge{display:inline-flex; align-items:center; gap:.7rem; padding:.65rem 1.3rem; border-radius:var(--r-md); background:#141B2D; color:#fff; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.store-badge:hover{transform:translateY(-2px); box-shadow:var(--sh-md); color:#fff;}
.store-badge__txt{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.store-badge__txt small{font-size:.6rem; letter-spacing:.06em; opacity:.85; text-transform:uppercase;}
.store-badge__txt b{font-size:1.05rem; font-weight:var(--fw-bold);}

/* Services team illustration (self-made, no real people) */
.team-illus{margin:0; border-radius:24px; overflow:hidden; box-shadow:var(--sh-md); display:block;}
.team-illus svg,.team-illus img{display:block; width:100%; height:auto;}

/* ---------------------------------------------------------------------------
   17. PRICING
   --------------------------------------------------------------------------- */
.pricing-key{text-align:center; max-width:760px; margin:0 auto var(--sp-7);}
.pricing-key__line{font-size:var(--fs-h3); color:var(--text-primary); font-weight:var(--fw-semi);}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); align-items:stretch;}
.pricing-card{position:relative; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-6); display:flex; flex-direction:column; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.pricing-card--featured{border-color:var(--primary); border-width:2px; box-shadow:var(--glow-primary); background:radial-gradient(400px 200px at 50% 0%, rgba(78,95,210,.08), transparent 60%), var(--bg-white);}
.pricing-card__badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--grad-brand); color:#fff; font-size:.7rem; font-weight:var(--fw-bold); padding:.35rem .85rem; border-radius:var(--r-pill); white-space:nowrap; box-shadow:0 6px 18px rgba(78,95,210,.35);}
.pricing-card__tier{font-size:1.1rem; font-weight:var(--fw-bold); color:var(--text-primary);}
.pricing-card__tagline{font-size:var(--fs-sm); color:var(--primary); font-weight:var(--fw-semi); margin-top:var(--sp-1);}
.pricing-card__desc{font-size:var(--fs-sm); color:var(--text-secondary); margin-top:var(--sp-3);}
.pricing-card__price{margin:var(--sp-4) 0; font-size:1.9rem; font-weight:var(--fw-bold); color:var(--text-primary);}
.pricing-card__price--contact{font-size:1.4rem;}
.pricing-card__features{list-style:none; padding:0; margin:0 0 var(--sp-5); flex:1;}
.pricing-card__features li{position:relative; padding:.42rem 0 .42rem 1.7rem; font-size:var(--fs-sm); color:var(--text-secondary); border-bottom:1px solid var(--border);}
.pricing-card__features li:last-child{border-bottom:none;}
.pricing-card__features li::before{content:""; position:absolute; left:0; top:.72rem; width:14px; height:8px; border-left:2px solid var(--security); border-bottom:2px solid var(--security); transform:rotate(-45deg);}
.pricing-card__cta{margin-top:auto;}
.control-scale{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-top:var(--sp-6);}
.control-scale__col{background:#fff; padding:var(--sp-5);}
.control-scale__col h4{color:var(--text-primary); font-size:1rem;}
.control-scale__col ul{list-style:none; padding:0; margin:var(--sp-3) 0 0;}
.control-scale__col li{font-size:var(--fs-sm); color:var(--text-secondary); padding:.25rem 0;}
.control-scale__meter{grid-column:1/-1; background:var(--grad-brand); color:#fff; text-align:right; padding:.5rem var(--sp-5); font-size:var(--fs-xs); font-weight:var(--fw-semi);}
.include-tree{background:linear-gradient(180deg,#fff,#F2F5FD); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2rem);}
.include-tree__root{font-weight:var(--fw-bold); color:var(--text-primary); font-size:1.05rem; margin-bottom:var(--sp-4); display:flex; align-items:center; gap:.5rem;}
.include-tree__root svg{color:var(--security);}
.include-tree__items{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;}
.include-tree__items li{display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:.7rem .9rem; font-size:var(--fs-sm); color:var(--text-primary);}
.include-tree__items li::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--primary); flex-shrink:0;}
.include-tree__items li.is-accent::before{background:var(--security);}
.formula{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.6rem;}
.formula__item{background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:.7rem 1rem; font-weight:var(--fw-semi); color:var(--text-primary); font-size:var(--fs-sm);}
.formula__op{color:var(--text-muted); font-size:1.3rem; font-weight:700;}

/* ---------------------------------------------------------------------------
   18. CALLOUT / VERSUS / NOTLIST
   --------------------------------------------------------------------------- */
.callout{border-left:3px solid var(--primary); background:var(--primary-soft); border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--sp-5) var(--sp-6);}
.callout--security{border-left-color:var(--security); background:var(--security-soft);}
.callout--oneline{display:inline-block; margin-inline:auto;}
@media (min-width:1025px){.callout--oneline p{white-space:nowrap;}}
.callout--gw{border-left-color:var(--data); background:var(--data-soft);}
.callout--ai{border-left-color:var(--ai); background:var(--ai-soft);}
.callout p{font-size:var(--fs-lead); color:var(--text-primary); font-weight:var(--fw-medium); margin:0;}
.key-line{font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:var(--fw-bold); color:var(--text-primary); line-height:1.3;}
.key-line--center{max-width:26ch; margin-inline:auto; text-align:center;}
.versus{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);}
.versus__side{padding:var(--sp-6); border-radius:var(--r-lg); border:1px solid var(--border); background:#fff;}
.versus__side h4{font-size:1.1rem; margin-bottom:var(--sp-3);}
.versus__side--muted{background:var(--bg-page);}
.versus__side ul{margin:0; padding-left:1.1rem;} .versus__side li{font-size:var(--fs-sm); color:var(--text-secondary); padding:.2rem 0;}
.notlist{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);}
.notlist__col{padding:var(--sp-6); border-radius:var(--r-lg);}
.notlist__col--not{background:#FCEEF0; border:1px solid #F3D3D9;}
.notlist__col--not h4{color:#C0435A;}
.notlist__col--is{background:var(--data-soft); border:1px solid #cfe6f7;}
.notlist__col--is h4{color:var(--data);}
.notlist__col ul{list-style:none; padding:0; margin:var(--sp-3) 0 0;}
.notlist__col li{padding:.35rem 0; font-size:var(--fs-sm); display:flex; gap:.5rem; align-items:flex-start; color:var(--text-secondary);}
.notlist__col--not li::before{content:"✕"; color:#CE5069; font-weight:700; flex-shrink:0;}
.notlist__col--is li::before{content:"✓"; color:var(--data); font-weight:700; flex-shrink:0;}

/* ---------------------------------------------------------------------------
   19. CTA PANEL (light aurora)
   --------------------------------------------------------------------------- */
/* Dark luminous CTA — a bold contrast band on every page (duotone) */
.cta-panel{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl); padding:clamp(2.75rem,6vw,4.5rem); text-align:center;
  background:
    radial-gradient(680px 340px at 84% -10%, rgba(124,92,230,.42), transparent 60%),
    radial-gradient(620px 340px at 12% 120%, rgba(11,181,196,.28), transparent 60%),
    linear-gradient(180deg,#141E42,#0B1122);
  box-shadow:var(--sh-lg), 0 0 90px rgba(90,108,240,.20);}
.cta-panel h2{max-width:22ch; margin-inline:auto; font-size:clamp(1.7rem,2.8vw,2.5rem); color:#fff;}
.cta-panel p{color:#AEB9D2; margin:var(--sp-5) auto 0; max-width:56ch; font-size:var(--fs-lead);}
.cta-panel__actions{display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-7);}
.cta-panel .btn--outline{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.28);}
.cta-panel .btn--outline:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff;}

/* ---------------------------------------------------------------------------
   20. TABS
   --------------------------------------------------------------------------- */
.tabs__list{display:flex; gap:.35rem; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:var(--sp-6);}
.tabs__tab{background:none; border:none; font-family:inherit; padding:.8rem 1.1rem; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:var(--r-sm) var(--r-sm) 0 0;}
.tabs__tab:hover{color:var(--text-primary); background:var(--bg-soft-blue);}
.tabs__tab[aria-selected="true"]{color:var(--primary); border-bottom-color:var(--primary); font-weight:var(--fw-semi);}
.tabs__panel{display:none;} .tabs__panel.is-active{display:block; animation:fadeIn .3s var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
.tab-content{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center;}
.tab-content__caps{list-style:none; padding:0; margin:var(--sp-5) 0;}
.tab-content__caps li{position:relative; padding:.4rem 0 .4rem 1.7rem; font-size:var(--fs-sm); color:var(--text-primary);}
.tab-content__caps li::before{content:""; position:absolute; left:0; top:.7rem; width:8px; height:8px; border-radius:2px; background:var(--primary);}

/* ---------------------------------------------------------------------------
   21. ACCORDION
   --------------------------------------------------------------------------- */
.accordion{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:#fff;}
.accordion__item{border-bottom:1px solid var(--border);} .accordion__item:last-child{border-bottom:none;}
.accordion__trigger{width:100%; text-align:left; background:none; border:none; font-family:inherit; padding:var(--sp-5); font-size:1.02rem; font-weight:var(--fw-semi); color:var(--text-primary); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.accordion__trigger:hover{background:var(--bg-soft-blue);}
.accordion__icon{flex-shrink:0; transition:transform var(--dur) var(--ease); color:var(--text-muted);}
.accordion__trigger[aria-expanded="true"] .accordion__icon{transform:rotate(45deg);}
.accordion__panel{max-height:0; overflow:hidden; transition:max-height var(--dur) var(--ease);}
.accordion__panel-inner{padding:0 var(--sp-5) var(--sp-5); color:var(--text-secondary); font-size:var(--fs-sm);}

/* ---------------------------------------------------------------------------
   22. CONTACT FORM
   --------------------------------------------------------------------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);}
.field{display:flex; flex-direction:column; gap:.4rem;} .field--full{grid-column:1/-1;}
.field label{font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--text-primary);}
.field label .req{color:var(--d-boundary);}
.field input,.field select,.field textarea{font-family:inherit; font-size:var(--fs-body); color:var(--text-primary); padding:.75rem .9rem; border:1px solid var(--border-strong); border-radius:var(--r-md); background:#fff; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
.field textarea{resize:vertical; min-height:120px;}
.field__hint{font-size:var(--fs-xs); color:var(--text-muted);}
.form-status{background:var(--security-soft); color:#0c6b48; border:1px solid #bfe8d8; border-radius:var(--r-md); padding:1rem 1.25rem; margin-bottom:1.5rem;}

/* ---------------------------------------------------------------------------
   23. FOOTER (light) — logo direct (no lockup needed on light bg)
   --------------------------------------------------------------------------- */
/* Dark footer (duotone close) */
.site-footer{background:
  radial-gradient(600px 300px at 90% 0%, rgba(124,92,230,.14), transparent 60%),
  #0B1122; color:#AEB9D2; padding-block:var(--sp-8) var(--sp-6); border-top:1px solid rgba(255,255,255,.08);}
.site-footer a{color:#AEB9D2;} .site-footer a:hover{color:#9db0ff;}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-6); padding-bottom:var(--sp-7); border-bottom:1px solid rgba(255,255,255,.10);}
.footer__lockup{display:inline-flex; background:#fff; border-radius:12px; padding:.55rem .8rem;} /* white lockup keeps dark-inked logo legible, unmodified */
.footer__lockup img{height:26px; width:auto; display:block;}
.footer__tagline{margin-top:var(--sp-4); font-size:var(--fs-sm); color:#8E9BB6; max-width:36ch;}
.footer__col h5{color:#fff; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--sp-4);}
.footer__col ul{list-style:none; padding:0; margin:0;} .footer__col li{margin-bottom:.6rem; font-size:var(--fs-sm);}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:var(--sp-5); font-size:var(--fs-xs); color:#7E8AA3;}

/* ---------------------------------------------------------------------------
   23b. DUOTONE DARK BAND (.section--dark) — scoped token flip so the same
   markup renders as a luminous dark section. Creates the light↔dark rhythm.
   --------------------------------------------------------------------------- */
.section--dark{
  --text-primary:#FFFFFF;
  --text-secondary:#AEB9D2;
  --text-muted:#8593AD;
  --border:rgba(255,255,255,.10);
  --border-soft:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.20);
  --bg-white:#141E3D;
  --bg-page:#0B1020;
  color:var(--text-secondary);
  background:
    radial-gradient(780px 480px at 84% -12%, rgba(124,92,230,.34), transparent 58%),
    radial-gradient(700px 480px at 58% 4%, rgba(78,95,210,.26), transparent 55%),
    radial-gradient(680px 500px at 2% 110%, rgba(11,181,196,.18), transparent 60%),
    #0B1020;
}
.section--dark .section-heading__eyebrow{color:#9db0ff;}
.section--dark .section-heading__eyebrow::before{background:linear-gradient(120deg,#7C8BF3,#0BB5C4);}
.section--dark .card{background:linear-gradient(180deg,#152040,#101838); border-color:var(--border);}
.section--dark .card__icon{background:rgba(255,255,255,.06); color:#b9c2ff; box-shadow:0 0 24px rgba(90,108,240,.25);}
.section--dark .problem-card--trios .card__icon{color:#8febc7;}
.section--dark .problem-card--gw .card__icon{color:#9ed3f7;}
.section--dark .problem-card--uni .card__icon{color:#cbb8fb;}
.section--dark .feature-card__num{background:rgba(255,255,255,.08); color:#b9c2ff;}
.section--dark a{color:#9db0ff;} .section--dark .link-arrow{color:#9db0ff;}
.section--dark .problem-card--trios .link-arrow{color:#8febc7;}
.section--dark .problem-card--gw .link-arrow{color:#9ed3f7;}
.section--dark .problem-card--uni .link-arrow{color:#cbb8fb;}
.section--dark .pill{background:rgba(255,255,255,.05); color:var(--text-secondary);}
.section--dark .btn--outline{background:rgba(255,255,255,.05); color:#fff; border-color:rgba(255,255,255,.24);}
.section--dark .btn--outline:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.section--dark .callout{background:rgba(255,255,255,.05);}
.section--dark .callout--security{background:rgba(34,201,154,.12);}
.section--dark .callout--gw{background:rgba(46,139,216,.14);}
.section--dark .callout--ai{background:rgba(124,92,230,.16);}
.section--dark .table-wrap{background:rgba(255,255,255,.03);}
.section--dark .comparison-table thead th{background:rgba(255,255,255,.04);}
/* diagrams glow on the dark band */
.section--dark .diagram-card{background:linear-gradient(180deg,#111a38,#0C1430); border-color:var(--border);}
.section--dark .diagram-node{background:rgba(255,255,255,.04);}
.section--dark .diagram-node--app{color:#b9c2ff;} .section--dark .diagram-node--security{color:#8febc7;}
.section--dark .diagram-node--integ{color:#9ed3f7;} .section--dark .diagram-node--ai{color:#cbb8fb;}
.section--dark .diagram-node--plain{color:#dbe3f5;} .section--dark .diagram-node--external{color:#b6c0d6;}
.section--dark .workflow-step{background:rgba(255,255,255,.03);}
.section--dark .stack-layer{background:rgba(255,255,255,.03);}
.section--dark .lifecycle__step{background:rgba(34,201,154,.16); color:#8febc7; border:1px solid rgba(34,201,154,.3);}
.section--dark .integration-strip{background:rgba(255,255,255,.03);}
.section--dark .integration-strip__item{background:rgba(255,255,255,.05);}
.section--dark .control-scale{background:var(--border);}
.section--dark .control-scale__col{background:#131C38;}
.section--dark .include-tree{background:linear-gradient(180deg,#131C38,#0E1530);}
.section--dark .include-tree__items li{background:rgba(255,255,255,.03);}
.section--dark .versus__side{background:#131C38;}
.section--dark .img-slot{background:radial-gradient(420px 240px at 82% 0%, rgba(124,92,230,.22), transparent 60%), radial-gradient(360px 220px at 8% 100%, rgba(11,181,196,.18), transparent 60%), linear-gradient(180deg,#131C38,#0E1530);}
.section--dark .img-slot__icon{background:rgba(255,255,255,.06); color:#b9c2ff;}
/* screenshot / mock glow stronger on dark */
.section--dark .screenshot-frame,.section--dark .mock{box-shadow:var(--sh-lg), 0 0 60px rgba(90,108,240,.28);}

/* ---------------------------------------------------------------------------
   24. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hero__grid,.portfolio-flagship__grid{grid-template-columns:1fr;}
  .mega-menu__grid{grid-template-columns:1fr 1fr;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  /* backdrop-filter on the header makes it a containing block for fixed children,
     which traps the mobile drawer inside the header box — disable it on mobile */
  .site-header{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .nav__toggle{display:inline-flex;}
  .nav__menu{position:fixed; inset:var(--header-h) 0 0 0; flex-direction:column; align-items:stretch; background:#fff; margin:0; padding:var(--sp-5) var(--gutter) calc(var(--sp-8) + 72px); gap:.25rem; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform var(--dur) var(--ease); border-top:1px solid var(--border); z-index:105;}
  .nav__menu.is-open{transform:none;}
  .nav__link{padding:.9rem .6rem; font-size:1rem; justify-content:space-between; width:100%;}
  .nav__spacer{display:none;}
  .nav__actions{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); padding:var(--sp-4) var(--gutter); justify-content:space-between; transform:translateX(100%); transition:transform var(--dur) var(--ease); z-index:106;}
  .nav__actions.is-open{transform:none;}
  .mega-menu{position:static; width:100%; transform:none; box-shadow:none; border:none; border-radius:0; padding:.25rem 0 .5rem; opacity:1; visibility:visible; display:none;}
  .nav__item--has-menu.is-open .mega-menu{display:block;}
  .mega-menu__grid{grid-template-columns:1fr; gap:var(--sp-4);} .mega-menu__foot{display:none;}
  .mega-link--feature{background:var(--bg-soft-blue);}
  .problem-grid,.pricing-grid,.feature-grid,.feature-grid--3,.portfolio__row,.tab-content,.form-grid,.versus,.notlist,.footer__grid,.include-tree__items{grid-template-columns:1fr;}
  .control-scale{grid-template-columns:1fr;} .control-scale__meter{text-align:center;}
  .footer__bottom{flex-direction:column; align-items:flex-start;}
}
@media (max-width:520px){
  :root{--header-h:64px;}
  .hero__actions .btn,.cta-panel__actions .btn{flex:1 1 100%;}
  .pricing-card__price{font-size:1.65rem;}
  .diagram-flow{flex-direction:column;}
}

/* ---------------------------------------------------------------------------
   25. MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
.no-js .nav__menu{position:static; transform:none; flex-direction:row;}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); will-change:opacity,transform;}
  .reveal.is-in{opacity:1; transform:none;}
}

/* ---------------------------------------------------------------------------
   PATENT — "Công nghệ độc quyền" (secure-gateway.html)
   --------------------------------------------------------------------------- */
.patent-chip{display:inline-flex; align-items:center; gap:.8rem; margin-top:var(--sp-5); padding:.65rem 1rem .65rem .8rem; background:#fff; border:1px solid var(--border-strong); border-left:3px solid var(--data); border-radius:var(--r-md); color:var(--text-primary); box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.patent-chip:hover{color:var(--text-primary); transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--data);}
.patent-chip>svg{color:var(--data); flex-shrink:0;}
.patent-chip__txt{display:flex; flex-direction:column; line-height:1.3; text-align:left;}
.patent-chip__txt b{font-size:var(--fs-sm); font-weight:var(--fw-semi);}
.patent-chip__txt small{font-size:var(--fs-xs); color:var(--text-secondary);}
.patent-chip .arr{color:var(--data); font-weight:var(--fw-semi); transition:transform var(--dur) var(--ease);}
.patent-chip:hover .arr{transform:translateX(3px);}

.patent{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:start;}
.patent__doc{margin:0; position:sticky; top:calc(var(--header-h) + 24px);}
.patent__open{display:block; position:relative; width:100%; padding:0; border:1px solid var(--border-strong); border-radius:var(--r-md); background:#fff; overflow:hidden; cursor:zoom-in; line-height:0; box-shadow:var(--sh-lg), 0 0 50px rgba(46,139,216,.12); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.patent__open:hover{transform:translateY(-3px); box-shadow:var(--sh-lg), 0 0 60px rgba(46,139,216,.22);}
.patent__open img{width:100%; height:auto; display:block;}
.patent__zoom{position:absolute; right:.75rem; bottom:.75rem; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem; border-radius:var(--r-pill); background:rgba(20,27,45,.82); color:#fff; font-size:var(--fs-xs); font-weight:var(--fw-medium); line-height:1.2;}
.patent__doc figcaption{margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--text-muted); text-align:center;}

.patent__no{display:inline-flex; align-items:baseline; gap:.9rem; margin-top:var(--sp-5); padding:.7rem 1.2rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-xs);}
.patent__no-label{font-size:var(--fs-eyebrow); letter-spacing:.12em; text-transform:uppercase; font-weight:var(--fw-semi); color:var(--text-muted);}
.patent__no strong{font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:var(--fw-bold); color:var(--data); letter-spacing:.02em; line-height:1;}

.patent__points{list-style:none; padding:0; margin:var(--sp-6) 0 0; display:grid; gap:var(--sp-4);}
.patent__points li{display:flex; gap:.85rem; align-items:flex-start;}
.patent__points li>svg{flex-shrink:0; width:30px; height:30px; padding:6px; border-radius:50%; background:var(--data-soft); color:var(--data); margin-top:.1rem;}
.patent__points li>span{display:flex; flex-direction:column; gap:.15rem; color:var(--text-secondary);}
.patent__points b{color:var(--text-primary); font-weight:var(--fw-semi); font-size:var(--fs-h4);}

.patent__facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:var(--sp-6) 0 0; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;}
.patent__fact{background:#fff; padding:.85rem 1.1rem;}
.patent__fact--wide{grid-column:1/-1;}
.patent__fact dt{font-size:var(--fs-eyebrow); letter-spacing:.1em; text-transform:uppercase; font-weight:var(--fw-semi); color:var(--text-muted); margin:0 0 .25rem;}
.patent__fact dd{margin:0; font-size:var(--fs-sm); color:var(--text-primary); line-height:1.5;}

.patent-modal{width:min(94vw,760px); max-height:94vh; padding:0; border:0; border-radius:var(--r-md); background:#fff; box-shadow:var(--sh-lg); overflow:auto;}
.patent-modal::backdrop{background:rgba(20,27,45,.72);}
.patent-modal img{display:block; width:100%; height:auto; min-height:200px;}
.patent-modal__close{position:sticky; top:.6rem; float:right; margin:.6rem .6rem -2.6rem 0; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); background:#fff; color:var(--text-primary); font-size:1.5rem; line-height:1; cursor:pointer; box-shadow:var(--sh-sm);}
.patent-modal__close:hover{background:var(--data-soft);}

@media (max-width:900px){
  .patent{grid-template-columns:1fr;}
  .patent__doc{position:static; max-width:420px; margin-inline:auto;}
}
@media (max-width:560px){
  .patent__facts{grid-template-columns:1fr;}
  .patent-chip{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .patent-chip,.patent__open,.patent-chip .arr{transition:none;}
  .patent-chip:hover,.patent__open:hover{transform:none;}
}

/* Tiêu đề 2 dòng + đoạn mô tả 2 dòng (desktop) trong cột phải */
.patent__body{container-type:inline-size;}
@media (min-width:1025px){
  .patent__title{white-space:nowrap;}
  .patent__lead{font-size:clamp(.85rem,2.35cqw,1.1rem);}
  .patent__lead .patent-line{display:block; white-space:nowrap;}
}

/* Footer — thông tin liên hệ */
.footer__contact{list-style:none; padding:0; margin:var(--sp-5) 0 0; display:grid; gap:.8rem; max-width:40ch;}
.footer__contact li{display:flex; gap:.7rem; align-items:flex-start; font-size:var(--fs-sm); color:#C5CEE0; line-height:1.5;}
.footer__contact svg{flex-shrink:0; margin-top:.2rem; color:#8E9BB6;}
.footer__contact span{display:flex; flex-direction:column;}
.footer__contact small{font-size:var(--fs-xs); color:#7E8AA3; text-transform:uppercase; letter-spacing:.08em;}
.footer__contact a{color:#fff;}
.footer__contact a:hover{text-decoration:underline;}

/* Footer bottom — liên hệ dạng hàng ngang cạnh bản quyền */
.footer__bottom{align-items:flex-start;}
.footer__contact--inline{margin:0; max-width:none; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:flex-end;}
.footer__contact--inline li{align-items:center;}
.footer__contact--inline svg{margin-top:0;}
.footer__contact--inline span{flex-direction:row; gap:.4rem; align-items:baseline;}
.footer__contact--inline small{display:none;}
@media (max-width:900px){.footer__contact--inline{justify-content:flex-start; flex-direction:column;}}