/* ON INC Full Revamp (no build step) */
:root{
  --on-primary:#2f55d4;
  --on-ink:#23324d;
  --on-white:#ffffff;
  --on-bg:#f6f8ff;
  --on-border:rgba(35,50,77,.12);
  --on-shadow: 0 18px 60px rgba(35,50,77,.14);
  --on-shadow-sm: 0 10px 28px rgba(35,50,77,.10);
  --on-radius: 20px;
}

html{scroll-behavior:smooth;}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--on-ink);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(47,85,212,.18), transparent 60%),
              radial-gradient(900px 520px at 85% 15%, rgba(47,85,212,.12), transparent 55%),
              linear-gradient(180deg, var(--on-bg), #fff 40%, #fff);
  position: relative;
}

/* “Пыль”/noise overlay */
body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background-image: url('/assets/img/dust.svg');
  background-size: 520px 520px;
  background-repeat: repeat;
  opacity: .22;
  mix-blend-mode: multiply;
  z-index: 0;
}
body:after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: radial-gradient(800px 420px at 18% 12%, rgba(255,255,255,.55), transparent 60%),
              radial-gradient(900px 520px at 80% 6%, rgba(255,255,255,.45), transparent 55%);
  opacity: .45;
  z-index: 0;
}

main, header, footer{ position: relative; z-index: 1; }

/* =========================================================
   1:1 HOMEPAGE (reference-driven)
   ========================================================= */

.on-wrap{ width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
@media (max-width: 640px){ .on-wrap{ width: calc(100% - 28px); } }

/* Header */
.on-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(35,50,77,.10); }
.on-header__bar{ width: calc(100% - 48px); margin: 0 auto; display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 16px; }
@media (max-width: 640px){ .on-header__bar{ width: calc(100% - 28px);} }
.on-brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; }
.on-brand__mark{ width: 38px; height: 38px; border-radius: 16px; background: radial-gradient(circle at 30% 30%, #4a76ff, #2f55d4 55%, #1d3fae); box-shadow: 0 10px 24px rgba(47,85,212,.22); position:relative; }
.on-brand__mark:after{ content:""; position:absolute; inset: 9px; border-radius: 999px; border: 2px solid rgba(255,255,255,.9); }
.on-brand__name{ font-weight: 900; letter-spacing: -0.02em; font-size: 18px; color: var(--on-ink); }
.on-brand__sub{ font-size: 12px; color: rgba(35,50,77,.62); font-weight: 600; margin-top: 1px; }

/* Menu */
.on-header__nav{ flex: 1; display:flex; justify-content:flex-end; }
.on-menu{ width: 100%; display:flex; align-items:center; justify-content:space-between; gap: 16px; }
.on-menu__desktop{ display:flex; align-items:center; gap: 14px; justify-content:flex-start; flex: 1; min-width: 0; }
.on-menu__link{ color: rgba(35,50,77,.78); font-weight: 650; font-size: 13px; text-decoration:none; padding: 10px 10px; border-radius: 12px; transition: all .2s ease; white-space: nowrap; }
.on-menu__link:hover{ background: rgba(47,85,212,.06); color: rgba(35,50,77,.95); }
.on-caret{ font-size: 12px; margin-left: 6px; opacity: .6; }
.on-menu__actions{ display:flex; align-items:center; gap: 12px; }

/* Desktop dropdown */
.on-dd{ position: relative; }
.on-dd__btn{ background: transparent; border: 0; cursor: pointer; }
.on-dd__panel{ position:absolute; top: calc(100% + 10px); left: 0; min-width: 260px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(35,50,77,.14); box-shadow: 0 22px 70px rgba(35,50,77,.18); backdrop-filter: blur(14px); opacity: 0; transform: translateY(10px); pointer-events:none; transition: all .18s ease; z-index: 80; display:grid; gap: 6px; }
.on-dd__panel a{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-decoration:none; color: rgba(35,50,77,.90); font-weight: 650; background: rgba(35,50,77,.03); border: 1px solid rgba(35,50,77,.08); }
.on-dd__panel a:hover{ background: rgba(47,85,212,.07); border-color: rgba(47,85,212,.18); }
.on-dd:hover .on-dd__panel, .on-dd.is-open .on-dd__panel{ opacity: 1; transform: translateY(0); pointer-events:auto; }
.on-dd__sep{ height: 1px; background: rgba(35,50,77,.10); margin: 6px 4px; }
.on-dd__panel--wide{ min-width: 360px; }
.on-dd__item{ align-items:flex-start !important; }
.on-dd__ico{ width: 34px; height: 34px; border-radius: 12px; display:grid; place-items:center; background: rgba(47,85,212,.09); color: #2f55d4; flex: 0 0 auto; }
.on-dd__ico svg{ width: 18px; height: 18px; }
.on-dd__t{ display:block; font-weight: 800; color: rgba(35,50,77,.96); line-height: 1.2; }
.on-dd__d{ display:block; font-size: 12px; color: rgba(35,50,77,.66); margin-top: 2px; line-height: 1.25; }

/* Mobile groups */
.on-mgroup{ display:grid; gap: 8px; }
.on-mgroup__btn{ display:flex; justify-content:space-between; align-items:center; gap: 10px; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(35,50,77,.08); background: rgba(35,50,77,.03); color: rgba(35,50,77,.88); font-weight: 750; cursor: pointer; }
.on-mgroup__list{ display:none; padding-left: 8px; gap: 6px; }
.on-mgroup.is-open .on-mgroup__list{ display:grid; }
.on-menu__panelPhone{ margin: 10px 0 12px; font-weight: 800; color: rgba(35,50,77,.9); }
.on-menu__panelPhone a{ color: inherit; text-decoration:none; }
.on-header__cta{ padding: 12px 18px; border-radius: 12px; font-weight: 700; }

.on-header__phone{ display:none; font-weight: 700; color: var(--ink); opacity:.9; }
.on-header__phone a{ color: inherit; text-decoration:none; }
@media (min-width: 1100px){ .on-header__phone{ display:block; } }
@media (max-width: 1100px){ .on-header__cta{ display:none; } }

.on-menu__burger{ display:none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(35,50,77,.12); background: rgba(255,255,255,.8); box-shadow: 0 10px 26px rgba(35,50,77,.08); align-items:center; justify-content:center; gap: 4px; }
.on-menu__burger span{ display:block; width: 18px; height: 2px; background: rgba(35,50,77,.72); border-radius: 999px; }

.on-menu__overlay{ position:fixed; inset:0; background: rgba(10,18,40,.35); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index: 60; }
.on-menu__panel{ position:fixed; top: 12px; right: 12px; width: min(360px, calc(100% - 24px)); height: calc(100% - 24px); background: rgba(255,255,255,.92); border: 1px solid rgba(35,50,77,.12); border-radius: 22px; box-shadow: 0 30px 90px rgba(35,50,77,.22); transform: translateX(18px); opacity: 0; pointer-events:none; transition: all .25s ease; z-index: 61; display:flex; flex-direction:column; }
.on-menu__panelHead{ display:flex; align-items:center; justify-content:space-between; padding: 16px 16px 10px; }
.on-menu__panelTitle{ font-weight: 800; color: var(--on-ink); }
.on-menu__close{ width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(35,50,77,.12); background: rgba(35,50,77,.04); }
.on-menu__panelLinks{ padding: 8px 14px 14px; display:grid; gap: 6px; }
.on-menu__panelLinks a{ padding: 12px 12px; border-radius: 14px; text-decoration:none; color: rgba(35,50,77,.88); font-weight: 650; background: rgba(35,50,77,.03); border: 1px solid rgba(35,50,77,.08); }
.on-menu__panelActions{ padding: 12px 14px 16px; margin-top:auto; }

.on-menu.is-open .on-menu__overlay{ opacity:1; pointer-events:auto; }
.on-menu.is-open .on-menu__panel{ opacity:1; pointer-events:auto; transform: translateX(0); }

@media (max-width: 1024px){
  .on-menu__desktop{ display:none; }
  .on-menu__actions{ display:none; }
  .on-menu__burger{ display:flex; }
  .on-header__nav{ justify-content:flex-end; }
}

/* Headings (closer to ref) */
.on-section-head{ margin: 36px 0 22px; }
.on-h2{ font-weight: 850; letter-spacing: -0.02em; }
.on-lead{ color: rgba(35,50,77,.66); }
.on-accent{ color: var(--on-primary); }
.on-center{ text-align:center; }

/* Hero */
.on-home-hero{ padding: 0 0 26px; }
.on-home-hero--full{ padding: 0; }
.on-home-hero__swiper{ width: 100%; }
.on-home-hero__slide{ border-radius: 0; overflow:hidden; position:relative; box-shadow: 0 30px 80px rgba(35,50,77,.18); border-bottom: 1px solid rgba(35,50,77,.10);
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(84,134,255,.35), transparent 60%),
    radial-gradient(900px 520px at 90% 30%, rgba(47,85,212,.35), transparent 55%),
    linear-gradient(180deg, rgba(10,18,40,.86), rgba(32,54,140,.75));
}
.on-home-hero__slide:before{ content:""; position:absolute; inset:0; background-image: var(--hero-bg); background-size: cover; background-position: center; opacity: .55; mix-blend-mode: screen; }
.on-home-hero__slide:after{ content:""; position:absolute; inset:0; background: radial-gradient(900px 520px at 10% 10%, rgba(255,255,255,.06), transparent 60%); }
.on-home-hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 26px; padding: 54px 0 56px; min-height: 620px; align-items:center; width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
@media (max-width: 640px){ .on-home-hero__inner{ width: calc(100% - 28px); } }
@media (max-width: 1024px){ .on-home-hero__inner{ grid-template-columns: 1fr; padding: 34px 22px; min-height: 520px; } }
.on-kicker{ display:inline-flex; align-items:center; padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); font-weight: 650; font-size: 13px; }
.on-hero-title{ margin-top: 18px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; color: #fff; font-size: clamp(34px, 3.6vw, 54px); }
.on-hero-subtitle{ margin-top: 14px; color: rgba(255,255,255,.78); font-size: 16px; max-width: 560px; }
.on-hero-bullets{ margin-top: 18px; display:grid; gap: 10px; padding:0; list-style:none; color: rgba(255,255,255,.82); }
.on-hero-bullets li{ display:flex; gap: 12px; align-items:flex-start; }
.on-check{ width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 0 6px rgba(47,85,212,.25); margin-top: 2px; position:relative; }
.on-check:after{ content:""; position:absolute; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); left: 6px; top: 7px; opacity: .9; }
.on-hero-actions{ margin-top: 22px; display:flex; gap: 14px; flex-wrap:wrap; }
.on-btn-light{ background: rgba(255,255,255,.86); color: rgba(35,50,77,.92) !important; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.on-btn-light:hover{ background: #fff; transform: translateY(-1px); }
.on-arrow{ font-weight: 900; margin-left: 6px; }

.on-home-hero__visual{ position:relative; width: 100%; aspect-ratio: 1.12/1; }
.on-home-hero__visual img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 70px rgba(0,0,0,.28)); }
@media (max-width: 1024px){ .on-home-hero__right{ display:none; } }
.on-chip{ position:absolute; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 18px 48px rgba(0,0,0,.18); backdrop-filter: blur(12px); min-width: 120px; }
.on-chip__big{ font-weight: 900; color: var(--on-primary); font-size: 22px; letter-spacing: -0.02em; }
.on-chip__small{ font-weight: 700; color: rgba(35,50,77,.65); font-size: 12px; margin-top: 2px; }
.on-home-hero__pagination{ position:absolute; left:0; right:0; bottom: 18px; display:flex; justify-content:center; gap: 10px; z-index:2; }
.on-home-hero__pagination .swiper-pagination-bullet{ width: 10px; height: 10px; background: rgba(255,255,255,.35); opacity:1; }
.on-home-hero__pagination .swiper-pagination-bullet-active{ background: rgba(255,255,255,.95); }

/* ROI */
.on-section{ padding: 56px 0; }
.on-roi__grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items:stretch; margin-top: 22px; }
@media (max-width: 1024px){ .on-roi__grid{ grid-template-columns: 1fr; } }
.on-roi__card{ padding: 22px; border-radius: 22px; }
.on-roi__row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 900px){ .on-roi__row{ grid-template-columns: 1fr; } }
.on-roi__label{ font-weight: 650; color: rgba(35,50,77,.72); }
.on-roi__val{ margin-top: 6px; font-weight: 800; color: rgba(35,50,77,.95); }
.on-range{ width: 100%; margin-top: 10px; accent-color: var(--on-primary); }
.on-roi__actions{ margin-top: 16px; display:flex; justify-content:flex-start; }
.on-roi__result{ position:relative; border-radius: 22px; overflow:hidden; background-size: cover; background-position: center; min-height: 220px; }
.on-roi__resultOverlay{ position:absolute; inset:0; padding: 18px; display:flex; flex-direction:column; justify-content:space-between; background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.72)); }
.on-roi__resultK{ font-weight: 650; color: rgba(35,50,77,.62); }
.on-roi__resultBig{ font-weight: 900; color: var(--on-primary); font-size: 38px; letter-spacing:-0.03em; }
.on-roi__resultBig2{ font-weight: 900; color: rgba(35,50,77,.92); font-size: 34px; letter-spacing:-0.03em; }

/* Transition */
.on-transition__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items:center; }
@media (max-width: 1024px){ .on-transition__grid{ grid-template-columns: 1fr; } }
.on-transition__steps{ margin: 18px 0 22px; display:flex; gap: 18px; flex-wrap:wrap; }
.on-step{ display:flex; gap: 10px; align-items:center; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.85); border: 1px solid rgba(35,50,77,.10); box-shadow: 0 14px 40px rgba(35,50,77,.10); }
.on-step__icon{ width: 28px; height: 28px; display:grid; place-items:center; background: rgba(47,85,212,.10); color: var(--on-primary); border-radius: 10px; }
.on-step__t{ font-weight: 700; color: rgba(35,50,77,.86); }
.on-transition__right{ position:relative; }
.on-transition__img{ width: 100%; height: auto; filter: drop-shadow(0 30px 70px rgba(35,50,77,.18)); }

/* Solutions showcase */
.on-solutions__top{ margin-top: 22px; display:grid; grid-template-columns: .9fr 1fr 1fr; gap: 18px; align-items:stretch; }
@media (max-width: 1100px){ .on-solutions__top{ grid-template-columns: 1fr; } }
.on-solutions__tab{ padding: 18px; }
.on-solutions__tabTitle{ display:inline-flex; padding: 10px 14px; border-radius: 12px; background: rgba(47,85,212,.10); color: var(--on-primary); font-weight: 800; }
.on-solutions__tabText{ margin-top: 12px; color: rgba(35,50,77,.66); }
.on-solutions__tabSub{ margin-top: 14px; font-weight: 800; }
.on-solutions__tabList{ margin-top: 10px; padding-left: 0; list-style:none; display:grid; gap: 8px; color: rgba(35,50,77,.72); }
.on-solutions__tabList li{ display:flex; gap: 10px; }
.on-solutions__tabBtn{ margin-top: 14px; width: 100%; }
.on-solutions__list{ padding: 18px; }
.on-solutions__item{ display:flex; gap: 12px; padding: 12px 12px; border-radius: 16px; background: rgba(35,50,77,.03); border: 1px solid rgba(35,50,77,.08); }
.on-solutions__item + .on-solutions__item{ margin-top: 12px; }
.on-solutions__ico{ width: 40px; height: 40px; border-radius: 14px; background: rgba(47,85,212,.10); display:grid; place-items:center; }
.on-solutions__name{ font-weight: 850; }
.on-solutions__desc{ color: rgba(35,50,77,.62); font-size: 13px; margin-top: 2px; }
.on-solutions__more{ display:inline-flex; margin-top: 14px; color: var(--on-primary); font-weight: 750; text-decoration:none; }
.on-solutions__funnel{ border-radius: 22px; overflow:hidden; background: rgba(255,255,255,.80); border: 1px solid rgba(35,50,77,.10); box-shadow: 0 18px 60px rgba(35,50,77,.10); display:flex; align-items:center; justify-content:center; }
.on-solutions__funnel img{ width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.on-solutions__grid{ margin-top: 22px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1024px){ .on-solutions__grid{ grid-template-columns: 1fr; } }
.on-solutionCard{ padding: 18px; text-decoration:none; }
.on-solutionCard__ico{ width: 42px; height: 42px; border-radius: 16px; background: rgba(47,85,212,.10); display:grid; place-items:center; font-size: 18px; }
.on-solutionCard__t{ margin-top: 10px; font-weight: 850; color: rgba(35,50,77,.92); }
.on-solutionCard__d{ margin-top: 6px; color: rgba(35,50,77,.62); font-size: 13px; }
.on-solutionCard__more{ margin-top: 10px; color: var(--on-primary); font-weight: 750; }

/* Compare */
.on-compare__grid{ margin-top: 18px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1024px){ .on-compare__grid{ grid-template-columns: 1fr; } }
.on-compare__left{ padding: 18px; }
.on-compare__title{ font-weight: 900; font-size: 20px; }
.on-compare__stats{ margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.on-compare__stat{ background: rgba(35,50,77,.03); border: 1px solid rgba(35,50,77,.08); border-radius: 16px; padding: 12px; }
.on-compare__stat b{ font-weight: 900; font-size: 20px; }
.on-compare__stat span{ display:block; color: rgba(35,50,77,.62); font-weight: 650; font-size: 12px; margin-top: 2px; }
.on-compare__note{ margin: 14px 0; color: rgba(35,50,77,.66); }
.on-compare__right{ position:relative; overflow:hidden; background-size: cover; background-position: center; border-radius: 22px; }
.on-compare__rightOverlay{ position:absolute; inset:0; padding: 22px; background: linear-gradient(180deg, rgba(10,18,40,.25), rgba(10,18,40,.45)); color:#fff; }
.on-compare__rTitle{ font-weight: 900; font-size: 22px; }
.on-compare__rList{ margin-top: 14px; display:grid; gap: 10px; color: rgba(255,255,255,.86); }
.on-dot{ display:inline-block; width: 10px; height: 10px; border-radius:999px; background: rgba(255,255,255,.72); margin-right: 10px; }
.on-compare__rStats{ margin-top: 14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.on-compare__rStats b{ display:block; font-weight: 900; font-size: 18px; }
.on-compare__rStats span{ color: rgba(255,255,255,.72); font-size: 12px; font-weight: 650; }

/* Consultation strip */
.on-consult{ padding: 0 0 56px; }
.on-consult__bar{ border-radius: 22px; overflow:hidden; padding: 26px 26px; display:flex; align-items:center; justify-content:space-between; gap: 18px;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(84,134,255,.30), transparent 60%),
    linear-gradient(135deg, rgba(10,18,40,.92), rgba(32,54,140,.86));
  box-shadow: 0 30px 80px rgba(35,50,77,.22);
}
.on-consult__t{ color:#fff; font-weight: 900; font-size: 28px; letter-spacing:-0.02em; }
.on-consult__d{ margin-top: 6px; color: rgba(255,255,255,.72); font-weight: 550; }
.on-consult__actions{ display:flex; gap: 12px; flex-wrap:wrap; }
@media (max-width: 900px){ .on-consult__bar{ flex-direction:column; align-items:flex-start; } }

/* Testimonials */
.on-testimonials__grid{ margin-top: 22px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1024px){ .on-testimonials__grid{ grid-template-columns: 1fr; } }
.on-review{ padding: 18px; }
.on-review__head{ display:flex; gap: 12px; align-items:center; }
.on-avatar{ width: 44px; height: 44px; border-radius: 16px; background: linear-gradient(135deg, rgba(47,85,212,.22), rgba(47,85,212,.06)); border: 1px solid rgba(47,85,212,.18); }
.on-review__name{ font-weight: 850; }
.on-review__role{ color: rgba(35,50,77,.55); font-weight: 650; font-size: 12px; }
.on-review__text{ margin-top: 12px; color: rgba(35,50,77,.70); }
.on-review__link{ margin-top: 12px; display:inline-flex; color: var(--on-primary); font-weight: 750; text-decoration:none; }
.on-logos{ margin-top: 18px; display:flex; gap: 14px; flex-wrap:wrap; justify-content:center; opacity:.8; }
.on-logo{ padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.74); border: 1px solid rgba(35,50,77,.10); font-weight: 800; color: rgba(35,50,77,.72); }
.on-dots{ margin-top: 18px; display:flex; justify-content:center; gap: 10px; }
.on-dots span{ width: 8px; height: 8px; border-radius:999px; background: rgba(35,50,77,.18); }
.on-dots span.is-active{ background: rgba(35,50,77,.46); }

/* Tariff */
.on-tariff__box{ border-radius: 24px; padding: 28px; background: rgba(255,255,255,.82); border: 1px solid rgba(35,50,77,.10); box-shadow: 0 22px 70px rgba(35,50,77,.12); }
.on-tariff__steps{ margin-top: 16px; display:flex; align-items:center; justify-content:center; gap: 18px; flex-wrap:wrap; }
.on-tstep{ display:flex; align-items:center; gap: 12px; padding: 12px 16px; border-radius: 999px; background: rgba(35,50,77,.03); border: 1px solid rgba(35,50,77,.08); }
.on-tstep span{ width: 34px; height: 34px; border-radius: 999px; background: rgba(47,85,212,.12); color: var(--on-primary); display:grid; place-items:center; font-weight: 900; }
.on-tstep b{ font-weight: 900; }
.on-tstep small{ display:block; color: rgba(35,50,77,.60); font-weight: 650; }
.on-tarrow{ opacity:.5; font-weight: 900; }
.on-tariff__cta{ margin-left: 18px; }
@media (max-width: 1024px){ .on-tariff__cta{ margin-left: 0; width: 100%; display:flex; justify-content:center; } }

/* Articles */
.on-articles__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px){ .on-articles__head{ flex-direction:column; align-items:flex-start; } }
.on-articles__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1024px){ .on-articles__grid{ grid-template-columns: 1fr; } }
.on-post{ padding: 14px; text-decoration:none; }
.on-post__img{ height: 150px; border-radius: 18px; background: radial-gradient(circle at 30% 30%, rgba(47,85,212,.28), rgba(35,50,77,.06)); border: 1px solid rgba(35,50,77,.08); }
.on-post__tag{ margin-top: 12px; font-weight: 900; color: var(--on-primary); font-size: 12px; letter-spacing:.06em; }
.on-post__t{ margin-top: 8px; font-weight: 900; color: rgba(35,50,77,.92); font-size: 20px; letter-spacing:-0.02em; }
.on-post__meta{ margin-top: 10px; color: rgba(35,50,77,.55); font-weight: 650; }

/* Footer (reference-like) */
.on-footer{ margin-top: 56px; }
.on-footer__top{ background: radial-gradient(900px 520px at 20% 10%, rgba(47,85,212,.38), transparent 60%),
                  radial-gradient(900px 520px at 85% 0%, rgba(47,85,212,.22), transparent 60%),
                  linear-gradient(180deg, #0b1227, #0b1430 60%, #0a1022);
  color: rgba(255,255,255,.80);
  padding: 46px 0 22px;
}

.on-footer__cta{
  display:flex; align-items:center; justify-content:space-between; gap: 18px;
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  margin-bottom: 26px;
}
.on-footer__ctaTitle{ color:#fff; font-weight: 950; letter-spacing: -0.02em; font-size: 22px; }
.on-footer__ctaSub{ color: rgba(255,255,255,.70); margin-top: 4px; }
.on-footer__ctaActions{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }
.on-footer__cta .on-btn{ border-radius: 14px; }

.on-footer__grid{ display:grid; grid-template-columns: 1.1fr 1.5fr 1fr; gap: 26px; align-items:start; }
@media (max-width: 1024px){ .on-footer__grid{ grid-template-columns: 1fr; } }

.on-footer__brandRow{ display:flex; gap: 12px; align-items:center; text-decoration:none; color: inherit; }
.on-footer__logo{ width: 46px; height: 46px; border-radius: 18px; background: rgba(47,85,212,.35); display:grid; place-items:center; font-weight: 950; color:#fff; letter-spacing:-.02em; }
.on-footer__name{ color:#fff; font-weight: 950; }
.on-footer__sub{ color: rgba(255,255,255,.68); font-weight: 650; font-size: 12px; }
.on-footer__note{ margin-top: 12px; color: rgba(255,255,255,.68); line-height: 1.55; max-width: 420px; }

.on-footer__cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px){ .on-footer__cols{ grid-template-columns: 1fr; } }
.on-footer__col a{ display:block; text-decoration:none; color: rgba(255,255,255,.74); padding: 6px 0; }
.on-footer__col a:hover{ color: rgba(255,255,255,.92); }
.on-footer__h{ color: rgba(255,255,255,.92); font-weight: 900; font-size: 12px; letter-spacing:.08em; margin-bottom: 10px; text-transform: uppercase; }

.on-footer__contact a{ color: rgba(255,255,255,.88); text-decoration:none; }
.on-footer__cRow{ margin-top: 10px; display:flex; gap: 10px; align-items:flex-start; }
.on-footer__cIco{ width: 22px; opacity:.9; }

.on-footer__social{ display:flex; gap: 10px; margin-top: 14px; }
.on-footer__social a{ width: 38px; height: 38px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); display:grid; place-items:center; color: rgba(255,255,255,.86); text-decoration:none; background: rgba(255,255,255,.04); }
.on-footer__social a:hover{ background: rgba(255,255,255,.08); }
.on-footer__social svg{ width: 18px; height: 18px; }

.on-footer__bottom{ margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap: 14px; color: rgba(255,255,255,.62); font-weight: 650; }
@media (max-width: 900px){ .on-footer__bottom{ flex-direction:column; align-items:flex-start; } }
.on-footer__bottomLinks{ display:flex; gap: 14px; flex-wrap: wrap; }
.on-footer__bottomLinks a{ color: rgba(255,255,255,.68); text-decoration:none; }
.on-footer__bottomLinks a:hover{ color: rgba(255,255,255,.92); }


/* Typography (stylish headings) */
h1,h2,h3{ color: var(--on-ink); }
.on-h1{
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
}
.on-h2{
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
}
.on-title-mark{
  position: relative;
  display: inline-block;
}
.on-title-mark::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,85,212,.25), rgba(47,85,212,.00));
}

/* Keep legacy styles from fighting with Tailwind */
.navbar, .header, .main { background: transparent; }

/* Buttons */
.on-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem;
  border-radius: 14px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Smaller buttons inside header */
.on-header .on-btn{ padding:.62rem .9rem; border-radius: 12px; }
.on-header .on-btn-primary{ box-shadow: 0 10px 22px rgba(47,85,212,.22); }
.on-btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--on-primary), #1f45c6);
  box-shadow: 0 14px 30px rgba(47,85,212,.25);
}
.on-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(47,85,212,.32); }
.on-btn-ghost{
  color: var(--on-ink);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--on-border);
  backdrop-filter: blur(10px);
}
.on-btn-ghost:hover{ transform: translateY(-1px); box-shadow: var(--on-shadow-sm); }

/* Cards */
.on-card{
  border-radius: var(--on-radius);
  border: 1px solid var(--on-border);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  box-shadow: var(--on-shadow-sm);
}
.on-card:hover{ box-shadow: var(--on-shadow); }

/* Header */
.on-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.66);
  border-bottom: 1px solid rgba(35,50,77,.10);
}
.on-header.scrolled{ background: rgba(255,255,255,.82); }

/* Nice links */
.on-link{ color: var(--on-ink); opacity:.92; }
.on-link:hover{ color: rgba(255,255,255,.92); opacity:1; }

/* Section helpers */
.on-section{ padding: 84px 0; }
.on-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .72rem;
  color: rgba(35,50,77,.70);
}
.on-kicker::before{
  content:"";
  width: 28px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,85,212,.75), rgba(47,85,212,.18));
}
 .on-title{
  font-weight: 900;
  letter-spacing: -0.03em;
  position: relative;
  display: inline-block;
}
.on-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width: 72px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,85,212,.55), rgba(47,85,212,.08));
}
.on-lead{ color: rgba(35,50,77,.78); }

/* Hero slider */
.on-hero{ padding: 26px 0 30px; }
.on-hero__card{ overflow:hidden; }
.on-hero-swiper{ position: relative; }
.on-hero{ padding: 20px 0 26px; }
.on-hero__card{ overflow:hidden; border-radius: calc(var(--on-radius) + 10px); }
.on-hero-swiper{ position: relative; }
.on-hero__slide{
  position: relative;
  display:grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 44px 28px 34px;
  color: rgba(255,255,255,.92);
  background-image:
    radial-gradient(900px 520px at 18% 18%, rgba(47,85,212,.42), transparent 60%),
    radial-gradient(900px 520px at 82% 30%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(135deg, rgba(7,18,45,.96), rgba(35,50,77,.78)),
    var(--hero-bg);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}
.on-hero__slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
}
.on-hero__slide > *{ position: relative; z-index: 1; }

@media (min-width: 1024px){
  .on-hero__slide{ grid-template-columns: 1.1fr .9fr; padding: 58px 46px 52px; }
}
.on-hero__accent{ color: rgba(255,255,255,.70); font-weight: 600; font-size: 0.95rem; }

}
.on-pill{
  display:inline-flex; align-items:center;
  padding:.35rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: .75rem;
}
.on-mini{
  border-radius: 16px;
  border: 1px solid rgba(35,50,77,.10);
  background: rgba(255,255,255,.60);
  padding: 14px 16px;
}
.on-hero__visualCard{ padding: 22px; border-radius: var(--on-radius); }
.on-hero__visualCard{ border: 1px solid rgba(35,50,77,.12); background: rgba(255,255,255,.72); backdrop-filter: blur(12px); box-shadow: var(--on-shadow-sm); }

.on-hero__nav{
  position:absolute;
  right: 18px;
  top: 18px;
  display:flex;
  gap: 10px;
  z-index: 5;
}
.on-hero__arrow{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(35,50,77,.12);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.on-hero__arrow:hover{ transform: translateY(-1px); box-shadow: var(--on-shadow-sm); }
.on-hero__pagination{ position:absolute; left: 26px; bottom: 20px; z-index:5; }
.on-hero__pagination .swiper-pagination-bullet{ width: 8px; height: 8px; opacity: .4; }
.on-hero__pagination .swiper-pagination-bullet-active{ opacity: 1; }

/* Internal page hero */
.on-main{ min-height: 60vh; }
.on-page-hero{ padding: 20px 0 22px; }
.on-page-hero__wrap{ overflow:hidden; }
.on-page-hero__grid{ display:grid; grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; }
@media (min-width: 1024px){ .on-page-hero__grid{ grid-template-columns: 1.2fr .8fr; padding: 34px 30px; } }
.on-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px; font-size: 13px; color: rgba(35,50,77,.65); }
.on-breadcrumb__item{ color: rgba(35,50,77,.75); text-decoration: none; }
.on-breadcrumb__item:hover{ color: rgba(255,255,255,.92); }
.on-breadcrumb__sep{ opacity:.5; }
.on-page-hero__decor{
  height: 100%;
  border-radius: var(--on-radius);
  border: 1px solid rgba(35,50,77,.10);
  background:
    radial-gradient(800px 300px at 20% 10%, rgba(47,85,212,.20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  padding: 22px;
  display:grid;
  align-content:start;
  gap: 14px;
}
.on-page-hero__chip{ display:inline-flex; width:max-content; padding:.35rem .65rem; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(35,50,77,.12); font-weight: 800; }
.on-page-hero__stat{ border-radius: 16px; border: 1px solid rgba(35,50,77,.10); background: rgba(255,255,255,.60); padding: 14px 16px; }

/* Footer */
.on-footer{
  background: linear-gradient(180deg, rgba(35,50,77,.04), rgba(35,50,77,.08));
  border-top: 1px solid rgba(35,50,77,.10);
}

/* Reduce legacy heavy spacings */
.ptb-100{ padding: 84px 0 !important; }

/* Internal pages: hide legacy "hero" blocks (replaced by on-page-hero) */
.on-main .slider-block,
.on-main .page-header-section,
.on-main .breadcrumb-modern{
  display:none !important;
}

/* Small helpers for legacy icons */
.on-icon{
  width: 44px; height: 44px; border-radius: 14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(47,85,212,.10);
  color: rgba(255,255,255,.92);
}

/* Mobile */
@media (max-width: 991px){
  .on-section{ padding: 64px 0; }
}

/* Hero visual */
.on-hero__content .on-lead{ color: rgba(255,255,255,.78); }
.on-hero__visualCard{
  border-radius: 24px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}
.on-hero__visualCard .on-card{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14);
}
.on-hero__float{
  position:absolute;
  display:flex;
  gap:10px;
  align-items:flex-end;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 55px rgba(0,0,0,.28);
}
.on-hero__float span{ font-weight: 900; font-size: 1.2rem; line-height:1; }
.on-hero__float small{ display:block; font-size:.78rem; opacity:.8; line-height:1.1; }
.on-hero__float--1{ top: 28px; right: 36px; }
.on-hero__float--2{ top: 160px; left: 16px; }
.on-hero__float--3{ bottom: 36px; right: 90px; }

@media (max-width: 1023px){
  .on-hero__float{ display:none; }
}

/* Section titles */
.on-section-title{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom: 22px;
}
.on-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  color: rgba(35,50,77,.70);
}
.on-eyebrow::before{
  content:"";
  width: 34px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,85,212,.75), rgba(47,85,212,.18));
}
.on-section-title h2{
  margin:0;
}
.on-section-title .on-sub{
  color: rgba(35,50,77,.72);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* Premium typography + surfaces for internal pages */
.on-container{
  width: 100%;
  max-width: 1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left: 16px;
  padding-right: 16px;
}
.on-section{ padding: 40px 0; }
.on-surface{
  border-radius: calc(var(--on-radius) + 6px);
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(35,50,77,.12);
  box-shadow: var(--on-shadow-sm);
  padding: 22px;
}
@media (min-width: 768px){ .on-surface{ padding: 32px; } }

.on-prose{
  color: rgba(35,50,77,.86);
}
.on-prose h2, .on-prose h3{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}
.on-prose h2{
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  margin-top: 0;
  margin-bottom: 12px;
  position:relative;
  padding-bottom: 10px;
}
.on-prose h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom: 0;
  width: 74px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,85,212,.55), rgba(47,85,212,.08));
}
.on-prose h3{
  font-size: 1.15rem;
  margin-top: 20px;
  margin-bottom: 10px;
}
.on-prose p{ margin: 10px 0 14px; line-height: 1.7; }
.on-prose ul{ padding-left: 18px; }
.on-prose li{ margin: 7px 0; }

/* Premium tables */
.on-prose table,
table.table,
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(35,50,77,.12);
  box-shadow: 0 14px 40px rgba(35,50,77,.10);
  background: rgba(255,255,255,.92);
}
.on-prose table th, .on-prose table td,
.table th, .table td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(35,50,77,.10);
  vertical-align: top;
}
.on-prose table thead th,
.table thead th{
  background: linear-gradient(180deg, rgba(47,85,212,.10), rgba(47,85,212,.03));
  color: rgba(35,50,77,.92);
  font-weight: 800;
}
.on-prose table tbody tr:hover,
.table tbody tr:hover{
  background: rgba(47,85,212,.04);
}
.on-prose table tr:last-child td,
.table tr:last-child td{ border-bottom: none; }

/* Premium forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], textarea, select,
.form-control{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(35,50,77,.14);
  background: rgba(255,255,255,.92);
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(35,50,77,.06);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
textarea{ min-height: 120px; }
input:focus, textarea:focus, select:focus, .form-control:focus{
  outline: none;
  border-color: rgba(47,85,212,.55);
  box-shadow: 0 18px 42px rgba(47,85,212,.18);
}
label{ font-weight: 700; color: rgba(35,50,77,.86); }
.btn, button, .on-btn{
  border-radius: 14px;
}
.btn-primary{
  background: linear-gradient(135deg, rgba(47,85,212,1), rgba(47,85,212,.78));
  border: 0;
  box-shadow: 0 18px 55px rgba(47,85,212,.26);
}
.btn-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* =========================================================
   Additions (Menu v2 + Problems + Dust)
   ========================================================= */

/* Problems */
.on-problems{ padding-top: 70px; }
.on-problems .on-title{ margin-bottom: 22px; }
.on-problems__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px){ .on-problems__grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .on-problems__grid{ grid-template-columns: 1fr;} }
.on-problemCard{ padding: 18px 18px 16px; }
.on-problemCard__ico{ width: 44px; height: 44px; border-radius: 16px; display:grid; place-items:center; background: rgba(47,85,212,.10); box-shadow: 0 12px 26px rgba(47,85,212,.12); margin-bottom: 12px; font-size: 20px; }
.on-problemCard__t{ font-weight: 900; letter-spacing: -0.02em; color: rgba(35,50,77,.96); margin-bottom: 6px; }
.on-problemCard__d{ color: rgba(35,50,77,.70); line-height: 1.45; font-size: 13px; }



/* =========================================================
   1:1 HOMEPAGE TUNING (design_site.png)
   Goal: bigger spacing, wider container, premium cards, full-width hero.
   ========================================================= */

:root{
  --on-primary:#2f55d4;
  --on-ink:#23324d;
  --on-bg:#f4f7ff;
  --on-card:#ffffff;
  --on-radius-lg:22px;
  --on-radius-md:18px;
  --on-shadow: 0 24px 70px rgba(35, 50, 77, .10);
  --on-shadow-sm: 0 14px 34px rgba(35, 50, 77, .10);
}

html, body{
  background: var(--on-bg);
}

body{
  position: relative;
  color: var(--on-ink);
  overflow-x: hidden;
}

/* dust overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1200px 700px at 70% 10%, rgba(47,85,212,.14), transparent 55%),
    radial-gradient(900px 520px at 18% 30%, rgba(47,85,212,.08), transparent 60%),
    url("/assets/img/dust.svg");
  background-size: auto, auto, 780px 780px;
  background-repeat: no-repeat, no-repeat, repeat;
  opacity: .55;
  mix-blend-mode: normal;
  z-index: 0;
}

main, header, footer{
  position: relative;
  z-index: 1;
}

/* Wider container like reference */
.on-wrap{
  max-width: 1240px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Bigger vertical rhythm */
.on-section{
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

.on-section.on-solutions{ padding-top: 58px !important; }
.on-section.on-compare{ padding-top: 54px !important; }

.on-center{ text-align:center; }
.on-mt-48{ margin-top:48px; }

/* Premium cards */
.on-card{
  border-radius: var(--on-radius-lg) !important;
  box-shadow: var(--on-shadow) !important;
  border: 1px solid rgba(35,50,77,.06) !important;
}

.on-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 90px rgba(35, 50, 77, .14) !important;
}

/* Headings 1:1 */
.on-h2{
  font-size: 40px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
}

.on-lead{
  font-size: 16px !important;
  color: rgba(35,50,77,.72) !important;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.on-h2.on-center + .on-lead{ text-align:center; }

/* --- HERO full width --- */
.on-home-hero--full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.on-home-hero{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.on-home-hero__slide{
  min-height: 720px !important;
  background: var(--hero-bg) center/cover no-repeat;
  position: relative;
}

.on-home-hero__slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(90deg, rgba(15,27,64,.55), rgba(15,27,64,.18));
  pointer-events:none;
}

.on-home-hero__inner{
  max-width: 1240px;
  padding: 98px 24px 86px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.on-hero-title{
  font-size: 52px !important;
  line-height: 1.06 !important;
  letter-spacing: -0.03em !important;
}

.on-hero-subtitle{
  font-size: 18px !important;
  line-height: 1.5 !important;
  max-width: 520px !important;
  opacity: .92;
}

.on-home-hero__right{
  max-width: 560px !important;
}

.on-home-hero__mock{
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* pagination like reference */
.on-home-hero .swiper-pagination{
  bottom: 26px !important;
}
.on-home-hero .swiper-pagination-bullet{
  width: 10px !important;
  height: 10px !important;
  opacity: .35 !important;
  background: rgba(255,255,255,.9) !important;
}
.on-home-hero .swiper-pagination-bullet-active{
  opacity: 1 !important;
}

/* --- Problems (cards row) --- */
.on-problems__grid{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 18px !important;
}
.on-problemCard{
  padding: 18px 18px !important;
  border-radius: 16px !important;
  box-shadow: var(--on-shadow-sm) !important;
}

/* --- Solutions composite block --- */
.on-solutions__top{
  grid-template-columns: 340px 480px 1fr !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 26px !important;
}
.on-solutions__tab{ padding: 22px !important; }
.on-solutions__list{ padding: 22px !important; }
.on-solutions__funnel img{
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--on-shadow);
  filter: saturate(1.05);
}
.on-solutions__grid{
  margin-top: 26px !important;
  gap: 18px !important;
}
.on-solutionCard{
  padding: 22px 22px !important;
}

/* --- ROI section sizing --- */
.on-roi__grid{
  gap: 22px !important;
}
.on-roi__card{
  border-radius: 20px !important;
  box-shadow: var(--on-shadow) !important;
}
.on-roi__result{
  border-radius: 20px !important;
  box-shadow: var(--on-shadow) !important;
}

/* --- Transition (migration) --- */
.on-transition__grid{
  gap: 26px !important;
}
.on-transition__right{
  border-radius: 22px !important;
  box-shadow: var(--on-shadow) !important;
}

/* --- Compare block 2 cards --- */
.on-compare__grid{
  gap: 22px !important;
}
.on-compare__left,
.on-compare__right{
  border-radius: 22px !important;
  box-shadow: var(--on-shadow) !important;
}
.on-compare__right{
  background: linear-gradient(135deg, #2f55d4, #1a2a52) !important;
}

/* --- Consultation strip --- */
.on-consult__bar{
  border-radius: 22px !important;
  padding: 44px 44px !important;
  box-shadow: 0 30px 90px rgba(10,18,45,.28) !important;
}

/* --- Testimonials --- */
.on-testimonials__grid{
  gap: 22px !important;
}
.on-review{
  padding: 24px 24px !important;
  border-radius: 18px !important;
}

/* --- Articles --- */
.on-articles__grid{
  gap: 22px !important;
}
.on-post{
  border-radius: 20px !important;
  box-shadow: var(--on-shadow) !important;
}

@media (max-width: 1100px){
  .on-solutions__top{ grid-template-columns: 1fr !important; }
  .on-home-hero__inner{ padding-top: 72px; }
  .on-hero-title{ font-size: 42px !important; }
  .on-problems__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .on-h2{ font-size: 32px !important; }
  .on-section{ padding-top: 54px !important; padding-bottom: 54px !important; }
  .on-home-hero__slide{ min-height: 640px !important; }
}