/* =========================================================
   LockSys Solutions — main.css
   1. Variables  2. Reset  3. Base  4. Typography  5. Layout
   6. Components  7. Navigation  8. Sections  11. Accessibility
   (9. Animations → animations.css, 10. Responsive → responsive.css)
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* color */
  --navy:#071F3D;
  --navy-2:#0C2B53;
  --navy-3:#123A6B;
  --blue:#126BFF;
  --blue-bright:#168BFF;
  --blue-light:#EAF4FF;
  --blue-50:#F5FAFF;
  --white:#FFFFFF;
  --text:#071F3D;
  --muted:#536477;
  --line:#DCE7F3;
  --line-strong:#BFD3EA;
  --on-navy:#E8F1FF;
  --on-navy-muted:#9DB3CF;
  --danger:#C62828;
  --success:#1F7A4D;

  /* the L lean (stem angle of the mark) */
  --lean:15.5deg;
  --lean-grad:105.5deg;

  /* type */
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --fs-hero:clamp(2.1rem,1.3rem + 2.9vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);
  --fs-h3:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --lh-body:1.85;
  --lh-head:1.35;

  /* spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(72px,6vw + 40px,136px);

  /* radius — restrained; sharp lean cuts carry the character */
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* shadow */
  --sh-1:0 1px 2px rgba(7,31,61,.06);
  --sh-2:0 12px 28px -16px rgba(7,31,61,.22);
  --sh-3:0 30px 60px -30px rgba(7,31,61,.35);

  /* container */
  --container:1240px;
  --gutter:clamp(20px,4vw,48px);
  --header-h:84px;
  --header-h-compact:66px;

  /* motion */
  --d-fast:180ms;
  --d-ui:320ms;
  --d-reveal:720ms;
  --d-hero:980ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* pattern */
  --pat-line:rgba(18,107,255,.09);
  --pat-gap:46px;
  --l-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%23126BFF' stroke-width='1.6'%3E%3Cpath d='M12 1 5 26H23'/%3E%3C/svg%3E");
  --l-tick-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%23168BFF' stroke-width='1.6'%3E%3Cpath d='M12 1 5 26H23'/%3E%3C/svg%3E");
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}

/* ---------- 3. BASE ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-compact) + 16px);background:var(--white)}
body{
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text);background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--blue);color:var(--white)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
bdi{unicode-bidi:isolate}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3{line-height:var(--lh-head);font-weight:700;letter-spacing:0}
h3{font-weight:600;font-size:var(--fs-h3)}
.section-title{font-size:var(--fs-h2);font-weight:700;color:var(--navy);text-wrap:balance}
.section-intro{font-size:var(--fs-lead);color:var(--muted);max-width:58ch;margin-top:var(--s-4);line-height:1.8}
.section-index{font-size:var(--fs-sm);font-weight:500;color:var(--blue);margin-bottom:var(--s-3);display:flex;align-items:center;gap:var(--s-2)}
.section-index::before{content:"";width:14px;height:17px;background:var(--l-tick) no-repeat center/contain}
p{text-wrap:pretty}

/* ---------- 5. LAYOUT ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y)}
.section-head{margin-bottom:clamp(40px,4vw,64px);max-width:720px}
.section-head--wide{max-width:820px}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(40px,6vw,96px);align-items:start}
.split__aside{position:sticky;top:calc(var(--header-h-compact) + 40px)}

/* ---------- 6. COMPONENTS ---------- */

/* Pattern: lean lines — parallel strokes at the stem angle */
.pattern-lean,
.hero__pattern,
.band-pattern,
.site-footer__pattern{
  background-image:repeating-linear-gradient(var(--lean-grad),transparent 0 var(--pat-gap),var(--pat-line) var(--pat-gap) calc(var(--pat-gap) + 1px));
}

/* L tick — the stem+foot corner, used as a structural marker */
.l-tick{display:inline-block;width:14px;height:17px;background:var(--l-tick) no-repeat center/contain;flex:none}

/* Buttons — the end is cut at the foot-bar angle */
.btn{
  --btn-bg:var(--blue);--btn-fg:var(--white);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding-inline:28px 30px;font-weight:600;font-size:1rem;color:var(--btn-fg);
  border-radius:0;transition:color var(--d-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg);
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%);
  border-start-start-radius:0;
  transition:background-color var(--d-fast) var(--ease-out),transform var(--d-ui) var(--ease-out);
}
.btn .i{width:18px;height:18px;transition:transform var(--d-ui) var(--ease-out)}
.btn:hover .i{transform:translateX(-4px)}
.btn:active::before{transform:scale(.98)}
.btn--primary:hover{--btn-bg:#0A5CE6}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy)}
.btn--ghost::before{box-shadow:inset 0 0 0 1.5px var(--line-strong);clip-path:none}
.btn--ghost:hover::before{box-shadow:inset 0 0 0 1.5px var(--navy)}

.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--navy);transition:background-color var(--d-fast)}
.icon-btn:hover{background:var(--blue-light)}

/* Text link with underline draw */
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue);position:relative;padding-bottom:2px}
.text-link::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--d-ui) var(--ease-out)}
.text-link:hover::after{transform:scaleX(1)}
.text-link .i{width:16px;height:16px;transition:transform var(--d-ui) var(--ease-out)}
.text-link:hover .i{transform:translateX(-4px)}

/* Cards */
.card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:var(--s-3);
  transition:border-color var(--d-ui) var(--ease-out),box-shadow var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);
}
.card::before{ /* L corner marker */
  content:"";position:absolute;inset-block-start:18px;inset-inline-end:18px;width:14px;height:17px;
  background:var(--l-tick) no-repeat center/contain;opacity:.28;transition:opacity var(--d-ui)
}
.card::after{ /* foot line */
  content:"";position:absolute;inset-inline:-1px;bottom:-1px;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-reveal) var(--ease-out)
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card__icon{width:48px;height:48px;display:grid;place-items:center;color:var(--blue);background:var(--blue-50);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:var(--s-2)}
.card__icon .i{width:24px;height:24px;transition:transform var(--d-ui) var(--ease-out)}
.card:hover .card__icon .i{transform:translateY(-2px)}
.card__title{font-size:var(--fs-h3);font-weight:600;color:var(--navy)}
.card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.8}

/* ---------- 7. NAVIGATION ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,0);
  transition:background-color var(--d-ui) var(--ease-out),box-shadow var(--d-ui) var(--ease-out);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:var(--header-h);transition:height var(--d-ui) var(--ease-out)}
.site-header.is-compact .site-header__row{height:var(--header-h-compact)}

.brand{display:inline-flex;align-items:center;gap:12px;color:var(--navy)}
.brand__mark{width:30px;height:40px;transition:transform var(--d-ui) var(--ease-out)}
.site-header.is-compact .brand__mark{transform:scale(.88)}
.brand__type{display:flex;flex-direction:column;line-height:1.05;font-size:1.2rem}
.brand__type b{font-weight:700;letter-spacing:-.01em}
.brand__type span{font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.14em;margin-top:3px}
.brand--light{color:var(--white)}
.brand--light .brand__type span{color:var(--on-navy-muted)}

.primary-nav{position:relative}
.primary-nav__list{display:flex;align-items:center;gap:4px}
.primary-nav__list a{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-sm);
  font-weight:500;font-size:.975rem;color:var(--navy);transition:color var(--d-fast),background-color var(--d-fast)
}
.primary-nav__list a .i{width:18px;height:18px;color:var(--muted);transition:color var(--d-fast),transform var(--d-ui) var(--ease-out)}
.primary-nav__list a:hover{background:var(--blue-50)}
.primary-nav__list a:hover .i{color:var(--blue);transform:translateY(-1px)}
.primary-nav__list a.is-active{color:var(--blue)}
.primary-nav__list a.is-active .i{color:var(--blue)}
.primary-nav__indicator{
  position:absolute;bottom:-2px;left:0;height:2px;width:0;background:var(--blue);
  transform:translateX(0) skewX(calc(var(--lean) * -1));opacity:0;
  transition:transform var(--d-ui) var(--ease-out),width var(--d-ui) var(--ease-out),opacity var(--d-fast)
}
.primary-nav__head,.primary-nav__foot{display:none}
.menu-toggle{display:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(7,31,61,.4);z-index:60;opacity:0;transition:opacity var(--d-ui)}
.nav-backdrop.is-visible{opacity:1}

/* ---------- 8. SECTIONS ---------- */

/* Hero */
.hero{
  position:relative;overflow:hidden;
  padding-bottom:clamp(72px,8vw,140px);
  margin-top:calc(var(--header-h) * -1);padding-top:calc(var(--header-h) + clamp(32px,5vw,88px));
  background:linear-gradient(180deg,var(--blue-50) 0%,var(--white) 78%);
}
.hero__pattern{
  position:absolute;inset:-10% -5% -10% 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(to left,transparent 0%,#000 55%,transparent 100%);
}
.hero__l{
  position:absolute;pointer-events:none;fill:none;stroke:var(--blue);stroke-width:.35;opacity:.18;
  width:min(62vw,760px);aspect-ratio:77/102;height:auto;
  inset-inline-end:-6vw;top:4%;
}
.hero__l--swoosh{opacity:.12}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,96px);align-items:center}
.hero__kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:500;color:var(--navy-3);margin-bottom:var(--s-5)}
.hero__title{font-size:var(--fs-hero);font-weight:700;color:var(--navy);line-height:1.28}
.hero__title .mask-line:last-child span{color:var(--blue)}
.hero__lead{font-size:var(--fs-lead);color:var(--muted);max-width:52ch;margin-top:var(--s-5);line-height:1.85}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero__domains{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--s-7);font-size:var(--fs-sm);color:var(--muted);font-weight:500}
.hero__domains li{display:block}
.hero__domains li+li::before{content:"";display:inline-block;vertical-align:middle;width:1px;height:14px;background:var(--line-strong);margin-inline:14px;transform:skewX(calc(var(--lean) * -1))}

.hero__visual{position:relative;padding-bottom:28px}
.ops{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:22px 22px 0;overflow:hidden;
}
.ops::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(to left,var(--navy) 0 30%,var(--blue) 30% 72%,var(--blue-bright) 72%)}
.ops__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ops__title{font-weight:600;color:var(--navy)}
.ops__status{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--success);font-weight:500}
.ops__status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(31,122,77,.12)}
.ops__list{padding-block:8px}
.ops__list li{
  display:grid;grid-template-columns:auto 1fr 84px;align-items:center;gap:12px;
  padding:12px 4px;border-bottom:1px dashed var(--line);font-size:var(--fs-sm);color:var(--navy)
}
.ops__list li:last-child{border-bottom:0}
.ops__list .i{width:20px;height:20px;color:var(--blue)}
.ops__list em{
  position:relative;display:block;height:6px;border-radius:3px;background:var(--blue-light);overflow:hidden
}
.ops__list em::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--w) * 100%);background:var(--blue);border-radius:3px;transform-origin:right}
.ops__base{
  display:flex;align-items:center;gap:12px;margin-inline:-22px;padding:16px 22px;
  background:var(--navy);color:var(--on-navy);font-weight:500;font-size:var(--fs-sm)
}
.ops__base .i{color:var(--blue-bright)}
.ops__links{position:absolute;inset-inline-start:0;top:60px;width:26px;height:calc(100% - 120px);fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ops__links path{vector-effect:non-scaling-stroke}
.hero__foot-bar{ /* echoes the L foot under the panel */
  position:absolute;bottom:0;inset-inline-start:18%;inset-inline-end:-6%;height:14px;
  background:linear-gradient(to left,#0A4CD6,var(--blue) 45%,var(--blue-bright));
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);
}

/* About */
.about{background:var(--white)}
.about__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,104px);align-items:end}
.about__lead{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.8;color:var(--navy);margin-block:var(--s-5) var(--s-4);font-weight:500}
.about__copy>p:last-child{color:var(--muted)}
.about__scope-label{font-size:var(--fs-sm);font-weight:500;color:var(--muted);margin-bottom:var(--s-4)}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.metric{display:flex;flex-direction:column-reverse;gap:4px;padding:22px 0 22px 18px;border-bottom:1px solid var(--line)}
.metric:nth-child(odd){border-inline-end:1px solid var(--line);padding-inline-end:0}
.metric:nth-child(even){padding-inline-start:22px}
.metric dd{font-size:clamp(2.5rem,2rem + 2vw,3.5rem);font-weight:700;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.metric dt{font-size:var(--fs-sm);color:var(--muted)}
.draw-line{display:block;height:1px;background:linear-gradient(to left,var(--blue),var(--line) 40%,transparent);margin-top:var(--section-y);margin-bottom:calc(var(--section-y) * -1)}

/* Solutions — bento */
.solutions{background:var(--blue-50)}
.solutions::before{ /* top-corner geometry */
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:min(40vw,520px);height:220px;pointer-events:none;
  background-image:repeating-linear-gradient(var(--lean-grad),transparent 0 22px,rgba(18,107,255,.08) 22px 23px);
  -webkit-mask-image:linear-gradient(to bottom left,#000,transparent 70%);mask-image:linear-gradient(to bottom left,#000,transparent 70%);
}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card--erp{grid-column:span 2;grid-row:span 2;background:var(--white);padding:clamp(28px,3vw,44px);border-color:var(--line-strong)}
.card--erp .card__title{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);font-weight:700;max-width:18ch}
.card--erp p{font-size:1rem;max-width:44ch}
.erp-map{margin-top:auto;padding-top:var(--s-6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative}
.erp-map li{
  position:relative;font-size:var(--fs-sm);font-weight:500;color:var(--navy);padding:12px 14px;
  background:var(--blue-50);border:1px solid var(--line);border-radius:var(--r-xs)
}
.erp-map li::before{content:"";position:absolute;inset-inline-start:10px;top:-9px;width:1px;height:9px;background:var(--line-strong)}
.erp-map::before{content:"";position:absolute;top:calc(var(--s-6) - 9px);inset-inline:10px;height:1px;background:var(--line-strong)}
.card--custom{background:var(--navy);border-color:var(--navy);color:var(--on-navy);grid-column:span 2}
.card--custom .card__title{color:var(--white)}
.card--custom p{color:var(--on-navy-muted)}
.card--custom .card__icon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--blue-bright)}
.card--custom::before{background-image:var(--l-tick-light);opacity:.6}
.card--custom .text-link{color:var(--blue-bright);margin-top:auto;align-self:flex-start}

/* Software rows */
.rows{border-top:1px solid var(--line)}
.row{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:24px 8px;border-bottom:1px solid var(--line);transition:background-color var(--d-ui)
}
.row::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform var(--d-ui) var(--ease-out)}
.row:hover{background:var(--blue-50)}
.row:hover::before{transform:scaleY(1)}
.row .i{color:var(--blue);width:24px;height:24px;margin-top:4px}
.row h3{color:var(--navy)}
.row p{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}

/* Navy bands */
.band-navy{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden}
.band-navy .section-title{color:var(--white)}
.band-navy .section-intro{color:var(--on-navy-muted)}
.band-edge{position:absolute;top:0;left:0;width:100%;height:clamp(28px,4vw,72px);fill:var(--white);z-index:1}
.band-pattern{position:absolute;inset:-20% 0;--pat-line:rgba(22,139,255,.08);--pat-gap:56px;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at 20% 40%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 20% 40%,#000,transparent 70%)}
.oracle{padding-top:calc(var(--section-y) + 40px)}
.oracle .container{position:relative;z-index:2}
.oracle__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.oracle__feature{
  position:relative;overflow:hidden;padding:clamp(28px,3vw,44px);border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--navy-3),var(--navy-2) 60%);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:14px;min-height:340px
}
.oracle__feature>.i{width:36px;height:36px;color:var(--blue-bright)}
.oracle__feature h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);font-weight:700;color:var(--white);margin-top:auto}
.oracle__feature p{color:var(--on-navy-muted);max-width:40ch}
.oracle__l{position:absolute;inset-block-start:-12%;inset-inline-start:-8%;width:62%;aspect-ratio:77/102;height:auto;fill:none;stroke:var(--blue-bright);stroke-width:.4;opacity:.35;pointer-events:none}
.oracle__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.oracle__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.oracle__list .i{color:var(--blue-bright);margin-top:3px}
.oracle__list h3{font-size:1.02rem;color:var(--white);font-weight:600}
.oracle__list p{font-size:var(--fs-sm);color:var(--on-navy-muted);margin-top:2px;line-height:1.7}

/* Infrastructure */
.infra__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-6)}
.tags li{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 18px;font-size:var(--fs-sm);font-weight:500;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xs);transition:border-color var(--d-fast),color var(--d-fast)
}
.tags li:hover{border-color:var(--blue);color:var(--blue)}
.tags .i{width:18px;height:18px;color:var(--blue)}
.stack{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 0}
.stack__layer{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;padding-inline:28px 36px;color:var(--navy);font-weight:600;
  margin-inline-end:calc(var(--i) * 22px);margin-inline-start:calc((4 - var(--i)) * 0px);
  isolation:isolate
}
.stack__layer::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--white);border:1px solid var(--line-strong);
  transform:skewX(calc(var(--lean) * -1));border-radius:var(--r-xs);box-shadow:var(--sh-1)
}
.stack__layer small{font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.stack__layer--db{color:var(--white)}
.stack__layer--db::before{background:var(--blue);border-color:var(--blue)}
.stack__layer--db small{color:rgba(255,255,255,.8)}
.stack__layer--bk{color:var(--on-navy)}
.stack__layer--bk::before{background:var(--navy);border-color:var(--navy)}
.stack__layer--bk small{color:var(--on-navy-muted)}

/* Integration hub */
.integration{background:linear-gradient(180deg,var(--white),var(--blue-50))}
.hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.hub__diagram{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto}
.hub__svg{width:100%;height:100%;overflow:visible}
.hub__svg .spoke{stroke:var(--line-strong);stroke-width:1;fill:none}
.hub__svg .spoke-live{stroke:var(--blue);stroke-width:1.4;fill:none;stroke-dasharray:4 10}
.hub__svg .ring{fill:none;stroke:var(--line);stroke-width:1}
.hub__svg .node{fill:var(--white);stroke:var(--line-strong);stroke-width:1;transition:stroke var(--d-fast),fill var(--d-fast)}
.hub__svg .node-ico{color:var(--blue)}
.hub__svg g.is-hot .node{stroke:var(--blue);fill:var(--blue-light)}
.hub__core{position:absolute;inset:0;margin:auto;width:92px;height:92px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line-strong);border-radius:50%;box-shadow:var(--sh-2)}
.hub__core img{width:34px;height:auto}
.hub__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;counter-reset:hub}
.hub__list li{
  counter-increment:hub;display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:var(--fs-sm);font-weight:500;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);cursor:default;
  transition:border-color var(--d-fast),box-shadow var(--d-fast)
}
.hub__list li .i{color:var(--blue);width:20px;height:20px}
.hub__list li:hover,.hub__list li.is-hot{border-color:var(--blue);box-shadow:var(--sh-1)}

/* Implementation process */
.implement{background:var(--blue-50)}
.process{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;position:relative;z-index:1}
.process__step{position:relative;padding:22px 16px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm)}
.process__n{position:absolute;inset-block-start:14px;inset-inline-end:16px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.process__step .i{color:var(--blue);width:24px;height:24px;margin-bottom:14px}
.process__step h3{font-size:1rem;color:var(--navy)}
.process__step p{font-size:var(--fs-xs);color:var(--muted);line-height:1.7;margin-top:4px}
.process__track{display:block;position:relative;height:2px;background:var(--line);margin-top:24px;overflow:hidden}
.process__fill{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:right}
.support{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(48px,5vw,80px);align-items:start}
.support__title{font-size:clamp(1.2rem,1rem + .6vw,1.5rem);color:var(--navy);font-weight:700}
.support__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.support__list li{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--navy);font-weight:500;font-size:var(--fs-sm)}
.support__list li::before{content:"";width:11px;height:13px;flex:none;background:var(--l-tick) no-repeat center/contain}

/* Why */
.why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.why__item{background:var(--white);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;gap:10px;transition:background-color var(--d-ui)}
.why__item:hover{background:var(--blue-50)}
.why__item .i{color:var(--blue);width:26px;height:26px;margin-bottom:8px;transition:transform var(--d-ui) var(--ease-out)}
.why__item:hover .i{transform:translateY(-2px)}
.why__item h3{color:var(--navy)}
.why__item p{color:var(--muted);font-size:var(--fs-sm);line-height:1.8}
.why__item--lead{grid-row:span 2;background:var(--blue-light);justify-content:flex-end}
.why__item--lead h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:700}
.why__item--lead p{font-size:1rem}
.why__item--lead .i{width:34px;height:34px;margin-bottom:auto}

/* Story */
.story{height:280vh}
.story__sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.story .band-pattern{--pat-line:rgba(22,139,255,.1)}
.story__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center;padding-top:40px}
.story__title{font-size:clamp(2rem,1.3rem + 2.8vw,3.6rem);font-weight:700;color:var(--white);line-height:1.3}
.story__title .mask-line:last-child span{color:var(--blue-bright)}
.story__stages{margin-top:clamp(28px,4vh,48px);display:grid;gap:4px;counter-reset:st}
.story__stages li{
  counter-increment:st;display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:.38;transition:opacity var(--d-ui) var(--ease-out)
}
.story__stages li::before{content:counter(st);font-size:var(--fs-xs);font-weight:600;color:var(--on-navy-muted);grid-row:span 2;font-variant-numeric:tabular-nums}
.story__stages b{font-size:1.15rem;font-weight:600;color:var(--white)}
.story__stages span{font-size:var(--fs-sm);color:var(--on-navy-muted)}
.story__stages li.is-on{opacity:1}
.story__stages li.is-on::before{color:var(--blue-bright)}
.story__art{position:relative;display:grid;place-items:center}
.story__svg{width:min(100%,380px);max-height:72vh;overflow:visible}
.story__ghost{fill:none;stroke:rgba(255,255,255,.1);stroke-width:.35}
.story__path{fill:rgba(18,107,255,.06);stroke:var(--blue-bright);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:var(--draw,1);stroke-linejoin:round}
.story__swoosh{fill:none;stroke:var(--blue);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:var(--draw2,1)}
.story-dot{fill:var(--navy);stroke:var(--on-navy-muted);stroke-width:.5;transition:fill var(--d-ui),stroke var(--d-ui)}
.story-dot.is-on{fill:var(--blue-bright);stroke:var(--white)}
.story-label{font-family:var(--font);font-size:3.4px;font-weight:600;fill:var(--on-navy-muted);transition:fill var(--d-ui)}
.story-label.is-on{fill:var(--white)}

/* Contact */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.contact__info{
  position:relative;overflow:hidden;padding:clamp(28px,3.4vw,52px);background:var(--navy);color:var(--on-navy);border-radius:var(--r-md);
  display:flex;flex-direction:column
}
.contact__info .section-title{color:var(--white)}
.contact__info>p{color:var(--on-navy-muted);margin-top:var(--s-4);max-width:40ch}
.contact__l{position:absolute;inset-block-end:-18%;inset-inline-start:-10%;width:70%;aspect-ratio:77/102;height:auto;fill:none;stroke:var(--blue-bright);stroke-width:.35;opacity:.28;pointer-events:none}
.contact__list{margin-top:auto;padding-top:var(--s-7);display:grid;gap:18px;position:relative}
.contact__list li{display:flex;align-items:center;gap:14px}
.contact__list .i{width:42px;height:42px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);color:var(--blue-bright)}
.contact__list span{display:block;font-size:var(--fs-xs);color:var(--on-navy-muted)}
.contact__list a{font-weight:600;color:var(--white);position:relative}
.contact__list a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform var(--d-ui) var(--ease-out)}
.contact__list a:hover::after{transform:scaleX(1)}

.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3.4vw,48px)}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-weight:500;font-size:var(--fs-sm);color:var(--navy)}
.req{color:var(--blue)}
.opt{color:var(--muted);font-weight:400;font-size:var(--fs-xs)}
.field input,.field textarea{
  width:100%;min-height:50px;padding:12px 14px;background:var(--blue-50);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:1rem;color:var(--navy);transition:border-color var(--d-fast),background-color var(--d-fast),box-shadow var(--d-fast)
}
.field input[dir="ltr"]{text-align:right}
.field input[dir="ltr"]:not(:placeholder-shown){text-align:left}
.field textarea{resize:vertical;min-height:140px;line-height:1.7}
.field input:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field textarea:focus{outline:none;background:var(--white);border-color:var(--blue);box-shadow:0 0 0 4px rgba(18,107,255,.12)}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--danger);background:#FFF8F8}
.field__error{min-height:0;font-size:var(--fs-xs);color:var(--danger);display:none}
.field.is-invalid .field__error{display:block}
.form__note{font-size:var(--fs-xs);color:var(--muted);margin-top:16px}
.form__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px}
.form__status{font-size:var(--fs-sm);font-weight:500}
.form__status.is-ok{color:var(--success)}
.form__status.is-err{color:var(--danger)}

/* Footer */
.site-footer{position:relative;background:var(--navy);color:var(--on-navy-muted);padding-top:clamp(56px,6vw,96px);padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden}
.site-footer__pattern{position:absolute;inset:0;--pat-line:rgba(22,139,255,.06);--pat-gap:64px;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000,transparent 60%);mask-image:linear-gradient(to right,#000,transparent 60%)}
.footer__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.footer__brand p{margin-top:18px;font-size:var(--fs-sm);max-width:38ch;line-height:1.8}
.footer__h{font-size:var(--fs-sm);font-weight:600;color:var(--white);margin-bottom:16px}
.footer__col ul{display:grid;gap:10px}
.footer__col a{font-size:var(--fs-sm);position:relative;transition:color var(--d-fast)}
.footer__col a:hover{color:var(--white)}
.footer__contact a{color:var(--on-navy)}
.social{display:flex;gap:8px;margin-top:24px}
.social__item{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);color:var(--on-navy-muted);opacity:.7}
.social__item .i{width:18px;height:18px}
.footer__bottom{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,5vw,72px);padding-block:22px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-xs)}
.to-top{color:var(--on-navy)}
.to-top:hover{color:var(--white)}

/* Preloader */
.preloader{display:none}
.intro .preloader{
  display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--white);
}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.preloader__mark{width:60px;height:80px}
.preloader__line{display:block;width:120px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right}
.preloader__name{font-weight:600;color:var(--navy);letter-spacing:.02em;font-size:1.05rem}

/* ---------- 11. ACCESSIBILITY ---------- */
.skip-link{position:absolute;inset-inline-start:16px;top:-80px;z-index:200;background:var(--navy);color:var(--white);padding:12px 18px;border-radius:var(--r-sm);font-weight:600;transition:top var(--d-fast)}
.skip-link:focus{top:16px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.band-navy :focus-visible,.site-footer :focus-visible,.contact__info :focus-visible{outline-color:var(--blue-bright)}
body.nav-open{overflow:hidden}
[tabindex="-1"]:focus{outline:none}
/* sticky pinning needs a non-scrolling ancestor */
.story{overflow:clip}
@supports not (overflow:clip){
  .story{height:auto;padding-block:var(--section-y)}
  .story__sticky{position:relative;height:auto}
}
/* keep the pinned story inside one viewport */
.story__title{font-size:clamp(2rem,1.3rem + 2.2vw,3.1rem)}
@media (min-width:1025px) and (max-height:860px){
  .story__stages{margin-top:20px}
  .story__stages li{padding:6px 0}
  .story__stages span{font-size:var(--fs-xs)}
}