/* =========================================================
   Alyph Systems LLC — Company Profile
   Corporate blue / white style, geometric pattern accents
   ========================================================= */

:root{
  --navy:      #154676;
  --navy-dark: #0f3459;
  --blue:      #1f6fb2;
  --sky:       #3fa9e0;
  --sky-soft:  #eaf4fc;
  --ink:       #1b2a3d;
  --body:      #566a80;
  --muted:     #8697aa;
  --line:      #e2e9f1;
  --grey:      #f1f4f8;
  --ff:        'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --pattern:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23154676' stroke-opacity='0.18' stroke-width='1'%3E%3Cpath d='M32 6 L47 15 L47 33 L32 42 L17 33 L17 15 Z'/%3E%3Ccircle cx='32' cy='24' r='11'/%3E%3Cpath d='M32 42 L32 58'/%3E%3C/g%3E%3C/svg%3E");
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--ff);
  color:var(--body);
  background:#fff;
  font-size:15.5px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ color:var(--navy); font-weight:700; line-height:1.25; letter-spacing:-.01em; }
p{ color:var(--body); }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--navy); }
img,svg{ max-width:100%; }
.container{ max-width:1180px; }
@media (max-width:767.98px){ .container{ padding-inline:1.25rem; } }

.text-navy{ color:var(--navy)!important; }
.text-sky{ color:var(--sky)!important; }
.text-muted-2{ color:var(--muted)!important; }
.fs-7{ font-size:.9rem!important; }
.fs-8{ font-size:.82rem!important; }

/* ---------- top bar ---------- */
.topbar{
  background:#cfe4f5 var(--pattern);
  background-blend-mode:soft-light;
  border-bottom:1px solid #b9d5ec;
  padding:.55rem 0;
}
.topbar .inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar .tag{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--navy); font-weight:700; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ width:40px; height:40px; flex:0 0 40px; }
.brand-name{ color:var(--navy); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; line-height:1.1; }
.brand-sub{ display:block; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); font-weight:700; margin-top:2px; }
@media (max-width:767.98px){ .topbar .tag{ display:none; } .topbar .inner{ justify-content:center; } }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:clamp(400px,58vh,620px);
  display:flex; align-items:center;
  background:
    radial-gradient(900px 460px at 78% 18%, rgba(63,169,224,.55), transparent 62%),
    linear-gradient(125deg, #0f3459 0%, #154676 45%, #1f6fb2 100%);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M32 6 L47 15 L47 33 L32 42 L17 33 L17 15 Z'/%3E%3Ccircle cx='32' cy='24' r='11'/%3E%3C/g%3E%3C/svg%3E");
}
.hero .container{ position:relative; z-index:2; }
.hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3rem); font-weight:800; letter-spacing:-.025em; margin-bottom:1rem; }
.hero p{ color:rgba(255,255,255,.88); font-size:clamp(1rem,1.4vw,1.1rem); max-width:660px; }
.hero .kicker{
  display:inline-block; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:#bfe0f6; border-left:4px solid var(--sky); padding-left:.7rem; margin-bottom:1rem;
}
.hero-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.hero-tags span{
  font-size:.8rem; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:.3rem .85rem;
}
.side-rail{
  position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:3;
  background:#fff; border-radius:0 8px 8px 0; padding:.5rem .35rem; box-shadow:0 6px 22px -12px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:.15rem;
}
.side-rail a{ width:30px; height:30px; display:grid; place-items:center; color:var(--navy); font-size:1rem; }
.side-rail a:hover{ color:var(--sky); }
@media (max-width:767.98px){ .side-rail{ display:none; } }
.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
  color:rgba(255,255,255,.85); text-align:center; font-size:.78rem; letter-spacing:.14em;
}
.scroll-cue i{ display:block; font-size:1.2rem; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ---------- section basics ---------- */
.section{ padding:clamp(3.5rem,7vw,5.5rem) 0; position:relative; }
.section.grey{ background:var(--grey); border-block:1px solid var(--line); }
.section.tint{ background:linear-gradient(180deg,#f4fafe, #fff); }

/* standard intro paragraph under a section heading */
.lead-p{ max-width:820px; font-size:1rem; margin-bottom:2.2rem; }

/* heading with the solid block accent */
.block-head{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.block-head .bar{ width:110px; height:38px; background:var(--navy); flex:0 0 auto; }
.block-head .bar.sky{ background:var(--sky); }
.block-head h2{ font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; letter-spacing:.01em; margin:0; text-transform:uppercase; }
.block-head h2 span{ color:var(--sky); }
@media (max-width:575.98px){ .block-head .bar{ width:64px; height:28px; } }

.center-head{ text-align:center; margin-bottom:2.4rem; }
.center-head h2{ font-size:clamp(1.5rem,3vw,2.2rem); text-transform:uppercase; font-weight:700; }
.center-head h2 span{ color:var(--sky); }
.center-head p{ max-width:820px; margin:.8rem auto 0; }

/* ---------- who are we ---------- */
.who-lead{ margin-bottom:1.6rem; }
.who-lead .txt{
  color:var(--blue); font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.5; font-weight:500;
  border-left:4px solid var(--sky); padding-left:1rem; max-width:520px;
}

/* image composition (rectangle + circle, built with CSS) */
.compose{ position:relative; padding:0 0 110px 0; }
.compose .rect{
  position:relative; border:3px solid var(--sky); border-radius:2px; padding:14px 0 0 14px;
}
.compose .rect .fill{
  height:360px; border-radius:2px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#1f6fb2,#154676 60%,#0f3459);
}
.compose .rect .fill::after{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1'%3E%3Cpath d='M32 6 L47 15 L47 33 L32 42 L17 33 L17 15 Z'/%3E%3Ccircle cx='32' cy='24' r='11'/%3E%3C/g%3E%3C/svg%3E");
}
.compose .rect .fill .label{
  position:absolute; left:0; right:0; top:0; padding:1.3rem 1.3rem 1.6rem; color:#fff; z-index:2;
  background:linear-gradient(180deg,rgba(15,52,89,.55),transparent);
}
.compose .rect .fill .label b{ display:block; font-size:1.02rem; }
.compose .rect .fill .label span{ font-size:.82rem; color:rgba(255,255,255,.8); }
.compose .rect .fill .items{
  position:absolute; left:1.3rem; right:52%; bottom:1.3rem; z-index:2; display:grid; gap:.5rem;
}
.compose .rect .fill .items div{
  display:flex; align-items:center; gap:.5rem; white-space:nowrap; color:rgba(255,255,255,.92); font-size:.78rem;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  border-radius:6px; padding:.42rem .7rem;
}
.compose .rect .fill .items i{ color:#bfe0f6; }
@media (max-width:1199.98px){ .compose .rect .fill .items{ right:1.3rem; bottom:5.5rem; } }
.compose .circle{
  position:absolute; right:-6px; bottom:0; width:215px; height:215px; border-radius:50%;
  border:6px solid #fff; box-shadow:0 14px 40px -18px rgba(21,70,118,.6);
  background:linear-gradient(150deg,#3fa9e0,#1f6fb2);
  display:grid; place-items:center; color:#fff; text-align:center; padding:1rem;
}
.compose .circle b{ display:block; font-size:1.8rem; font-weight:800; line-height:1; }
.compose .circle span{ font-size:.78rem; letter-spacing:.06em; }
.compose .dot{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--sky); border:3px solid #fff; }
.compose .dot.d1{ right:190px; bottom:175px; }
.compose .dot.d2{ left:6px; bottom:104px; }
.logo-card{
  position:absolute; right:0; top:-42px; background:#fff; border-radius:10px; padding:.9rem 1.2rem;
  box-shadow:0 16px 40px -20px rgba(21,70,118,.55); display:flex; align-items:center; gap:.6rem; z-index:4;
}
.logo-card .brand-name{ font-size:1.05rem; }
.logo-card::after{ content:""; position:absolute; right:12px; top:12px; width:9px; height:9px; border-radius:50%; background:var(--sky); }
@media (max-width:991.98px){
  .compose{ padding-bottom:60px; margin-top:3.2rem; }
  .compose .circle{ width:170px; height:170px; }
  .compose .dot.d1{ display:none; }
}

/* ---------- numbers flow ---------- */
.numbers{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:.4rem; }
.num-box{
  position:relative; flex:1 1 180px; max-width:230px; min-height:130px;
  border:2px dashed var(--navy); border-radius:10px; padding:1.1rem 1rem; background:#fff; text-align:center;
}
.num-box.solid{ border-style:solid; border-color:var(--blue); }
.num-box.sky{ border-color:var(--sky); }
.num-box .n{ font-size:1.9rem; font-weight:800; color:var(--ink); line-height:1.1; }
.num-box .n sup{ font-size:.72rem; font-weight:700; }
.num-box .l{ font-size:.82rem; color:var(--body); }
.num-box .arch{ position:absolute; right:-14px; top:-24px; width:46px; height:62px; }
.num-arrow{ align-self:center; color:var(--blue); font-size:1rem; }
@media (max-width:767.98px){ .num-arrow{ display:none; } .num-box{ max-width:none; } }

/* ---------- feature project (circle composition) ---------- */
.feature-circle{
  width:min(330px,80vw); aspect-ratio:1; border-radius:50%; border:8px solid #fff;
  box-shadow:0 18px 50px -22px rgba(21,70,118,.6); margin-inline:auto; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#1f6fb2,#154676);
  display:grid; place-items:center; color:#fff; text-align:center; padding:2rem;
}
.feature-circle::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.2' stroke-width='1'%3E%3Ccircle cx='32' cy='32' r='13'/%3E%3Cpath d='M32 6 L47 15 L47 33 L32 42 L17 33 L17 15 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.feature-circle > *{ position:relative; z-index:2; }
.feature-circle b{ display:block; font-size:1.35rem; }
.feature-circle span{ font-size:.85rem; color:rgba(255,255,255,.85); }
.circle-sm{
  width:150px; aspect-ratio:1; border-radius:50%; border:5px solid #dbeaf6;
  background:linear-gradient(150deg,#3fa9e0,#1f6fb2); display:grid; place-items:center;
  color:#fff; text-align:center; font-size:.8rem; padding:1rem; line-height:1.35;
}
.dash-arrow{ flex:1; border-top:2px dashed var(--blue); position:relative; min-width:40px; }
.dash-arrow::after{ content:"\F284"; font-family:"bootstrap-icons"; position:absolute; left:-4px; top:-14px; color:var(--blue); }

.btn-more{
  display:inline-block; background:var(--navy); color:#fff; border-radius:8px;
  padding:.6rem 2.1rem; font-weight:600; font-size:.95rem; border:0;
}
.btn-more:hover{ background:var(--navy-dark); color:#fff; }

/* ---------- diagonal patterned band ---------- */
.diagonal{ position:relative; padding:clamp(5rem,9vw,7rem) 0 clamp(4.5rem,8vw,6.5rem); overflow:clip; }
.diagonal::before{
  content:""; position:absolute; inset:-90px 0; z-index:0;
  background:#f4f6f9 var(--pattern); background-blend-mode:luminosity;
  transform:skewY(-3.5deg);
}
.diagonal .container{ position:relative; z-index:2; }
.stripe{ position:absolute; height:8px; border-radius:6px; z-index:1; transform:skewY(-3.5deg); pointer-events:none; }
.stripe.s1{ width:210px; background:var(--sky);  left:0;  top:18px; }
.stripe.s2{ width:380px; background:var(--blue); left:0;  top:36px; }
.stripe.s3{ width:260px; background:var(--sky);  right:0; bottom:40px; }
.stripe.s4{ width:420px; background:var(--blue); right:0; bottom:20px; }

/* industry staircase — page-scroll driven, centred rolling window */
.stairs-scroll{ position:relative; height:340vh; }
.stairs-sticky{
  position:sticky; top:0; height:100vh; min-height:660px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  padding:2rem 0;
}
.stairs-sticky .block-head{ margin-bottom:.9rem; }
.stairs-sticky .lead-p{ margin-bottom:1.6rem; }
.stairs-track{ position:relative; height:440px; }
.stairs-track .item{
  position:absolute; left:0; top:0; width:300px; display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
  will-change:transform, opacity;
}
.stairs-track .item.in{ opacity:1; pointer-events:auto; }
.stairs-track .item .card-img{
  min-height:330px; height:100%; transform:scale(.94); transform-origin:center center;
  opacity:.62; box-shadow:0 14px 30px -22px rgba(21,70,118,.55);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease, box-shadow .4s ease;
}
/* a step that has not arrived yet comes in small, then lands on the staircase */
.stairs-track .item:not(.in) .card-img{ transform:scale(.82); }
/* the step you are on: full colour, full size, lifted in front */
.stairs-track .item.current .card-img{
  transform:scale(1); opacity:1;
  box-shadow:0 30px 58px -24px rgba(21,70,118,.7);
}
.stairs-track .item.current{ z-index:3; }
.stairs-track .item .cap{ opacity:.55; transition:opacity .3s ease, color .3s ease; }
.stairs-track .item.current .cap{ opacity:1; color:var(--navy); }
.stairs-track .item.current .cap::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--sky); margin-left:.45rem; vertical-align:middle;
}
.stairs-track .item:nth-child(4n+2) .card-img{ background:linear-gradient(150deg,#3fa9e0,#1f6fb2); }
.stairs-track .item:nth-child(4n+3) .card-img{ background:linear-gradient(150deg,#154676,#0f3459); }
.stairs-track .item:nth-child(4n+4) .card-img{ background:linear-gradient(150deg,#2f8fcb,#154676); }

.stairs-meta{ display:flex; align-items:center; gap:1.2rem; margin-top:1.6rem; }
.stairs-count{ font-size:.82rem; color:var(--body); white-space:nowrap; }
.stairs-count b{ color:var(--navy); font-size:1rem; }
.stairs-count span{ color:var(--blue); font-weight:600; }
.stairs-progress{ flex:1; height:4px; background:rgba(21,70,118,.14); border-radius:4px; overflow:hidden; }
.stairs-progress span{
  display:block; height:100%; width:10%; border-radius:4px;
  background:linear-gradient(90deg,var(--sky),var(--navy)); transition:width .3s ease;
}

@media (max-width:991.98px){
  .stairs-scroll{ height:auto; }
  .stairs-sticky{ position:static; height:auto; min-height:0; overflow:visible; }
  .stairs-track{ height:auto !important; }
  .stairs-track .item{
    position:static; width:auto; opacity:1; pointer-events:auto;
    transform:none !important; margin-bottom:1.1rem;
  }
  .stairs-meta{ display:none; }
}
/* shared industry card visual */
.item .cap{
  color:var(--blue); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.55rem;
}
.card-img{
  flex:1; border:5px solid #fff; border-radius:8px; box-shadow:0 16px 36px -22px rgba(21,70,118,.55);
  min-height:250px; padding:1.4rem; color:#fff; display:flex; flex-direction:column; gap:1.2rem;
  background:linear-gradient(150deg,#1f6fb2,#154676);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-img:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -22px rgba(21,70,118,.6); }
.card-img i{ font-size:1.7rem; opacity:.95; }
.card-img .body{ margin-top:auto; }
.card-img b{ font-size:1.06rem; display:block; margin-bottom:.45rem; }
.card-img span{ font-size:.85rem; line-height:1.6; color:rgba(255,255,255,.9); display:block; }
.card-img ul{
  list-style:none; padding:.8rem 0 0; margin:.8rem 0 0; border-top:1px solid rgba(255,255,255,.28);
}
.card-img ul li{
  position:relative; padding-left:1.05rem; font-size:.82rem; line-height:1.5;
  color:rgba(255,255,255,.92); margin-bottom:.35rem;
}
.card-img ul li:last-child{ margin-bottom:0; }
.card-img ul li::before{
  content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:#bfe0f6;
}





/* explained industry cards */
.ind-card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:1.5rem;
  height:100%; position:relative; overflow:hidden;
  box-shadow:0 14px 34px -26px rgba(21,70,118,.55);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ind-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--sky),var(--blue)); opacity:0; transition:opacity .25s ease;
}
.ind-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(21,70,118,.6); border-color:#cfe0f2; }
.ind-card:hover::before{ opacity:1; }
.ind-card .head{ display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem; }
.ind-card .head .ico{
  width:46px; height:46px; flex:0 0 46px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--navy)); color:#fff; font-size:1.2rem;
  box-shadow:0 10px 22px -14px rgba(21,70,118,.9);
}
.ind-card .head h3{ font-size:1.05rem; margin:0; }
.ind-card .head span{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); font-weight:700; }
.ind-card > p{ font-size:.9rem; margin-bottom:.9rem; }
.ind-card ul{ list-style:none; padding:0; margin:0; border-top:1px dashed var(--line); padding-top:.8rem; }
.ind-card ul li{ position:relative; padding-left:1.1rem; font-size:.85rem; margin-bottom:.35rem; color:var(--body); }
.ind-card ul li:last-child{ margin-bottom:0; }
.ind-card ul li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--sky); }

/* ---------- projects grid (hash section) ---------- */
.hash-title{ font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--blue); font-weight:800; margin-bottom:.6rem; }
.sketch{
  border-radius:8px; min-height:380px; height:100%;
  background:linear-gradient(135deg,#eaf2fa,#f7fbfe 60%,#fff) ,var(--pattern);
  background-blend-mode:normal; border:1px solid var(--line); position:relative; overflow:hidden;
}
.sketch .inner{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem; }
.sketch .inner i{ font-size:2.4rem; color:var(--blue); opacity:.6; }
.sketch .inner p{ color:var(--navy); font-weight:600; margin:.6rem 0 0; }

.grid-card{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.15rem 1rem;
  box-shadow:0 12px 30px -22px rgba(21,70,118,.5); height:100%;
  display:flex; flex-direction:column; justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.grid-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -22px rgba(21,70,118,.55); border-color:#c9dcf0; }
.grid-card.text-center h3{ font-size:.92rem; }
.grid-card .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.grid-card .ico{
  width:38px; height:38px; border-radius:8px; display:grid; place-items:center;
  background:var(--sky-soft); color:var(--blue); font-size:1.05rem; border:1px solid #d5e8f7;
}
.grid-card h3{ font-size:.98rem; margin:.7rem 0 .35rem; }
.grid-card p{ font-size:.85rem; margin:0; }
.grid-card .built{
  margin-top:.8rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:.76rem; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:.35rem;
}
.grid-card .built i{ color:var(--sky); }

.status{ font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:100px; white-space:nowrap; border:1px solid; }
.status.live{ color:#0f7a3d; background:#eefaf2; border-color:#c7e9d5; }
.status.dev { color:#a15c07; background:#fdf6ec; border-color:#f0dfc3; }
.status.ops { color:var(--blue); background:var(--sky-soft); border-color:#cee3f5; }

/* ---------- tabs (services) ---------- */
.tab-nav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.tab-nav .nav-link{
  display:flex; align-items:center; gap:.55rem; background:#fff; border:1px solid var(--line);
  border-radius:100px; padding:.6rem 1.15rem; color:var(--body); font-size:.9rem; font-weight:600;
  transition:all .2s ease;
}
.tab-nav .nav-link i{ color:var(--blue); font-size:1rem; }
.tab-nav .nav-link:hover{ border-color:#bcd3ec; color:var(--navy); }
.tab-nav .nav-link.active{
  background:linear-gradient(140deg,var(--blue),var(--navy)); border-color:transparent; color:#fff;
  box-shadow:0 12px 26px -16px rgba(21,70,118,.9);
}
.tab-nav .nav-link.active i{ color:#bfe0f6; }

.tab-panel{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:clamp(1.3rem,3vw,2rem);
  box-shadow:0 18px 40px -32px rgba(21,70,118,.6);
}
.tab-panel .panel-head{ display:flex; align-items:center; gap:1rem; margin-bottom:.65rem; }
.tab-panel .panel-head .ico{
  width:52px; height:52px; flex:0 0 52px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--navy)); color:#fff; font-size:1.35rem;
  box-shadow:0 12px 24px -14px rgba(21,70,118,.9);
}
.tab-panel .panel-head .k{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); font-weight:700; }
.tab-panel .panel-head h3{ font-size:1.25rem; margin:0; }
.tab-panel .panel-sub{ font-size:.94rem; margin-bottom:1.4rem; max-width:820px; }
.tab-panel .panel-sub + .panel-sub{ margin-top:-.9rem; }
.panel-label{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky); font-weight:700; margin:1.5rem 0 .7rem;
}
.tab-pane.fade{ transition:opacity .25s ease; }

/* clear offering list (services) */
.offer-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 2.2rem; }
.offer-list li{ display:flex; gap:.9rem; padding:1rem 0; border-bottom:1px dashed var(--line); }
.offer-list li:last-child, .offer-list li:nth-last-child(2):nth-child(odd){ border-bottom:0; }
.offer-list .oi{
  width:36px; height:36px; flex:0 0 36px; border-radius:9px; display:grid; place-items:center;
  background:var(--sky-soft); color:var(--blue); font-size:1rem; border:1px solid #d7e7f7; margin-top:.15rem;
}
.offer-list b{ display:block; color:var(--navy); font-size:.96rem; margin-bottom:.2rem; }
.offer-list p{ font-size:.86rem; margin:0; line-height:1.6; }
@media (max-width:767.98px){
  .offer-list{ grid-template-columns:1fr; gap:0; }
  .offer-list li:nth-last-child(2):nth-child(odd){ border-bottom:1px dashed var(--line); }
}

.svc-item{
  border:1px solid var(--line); border-radius:10px; padding:1.05rem 1.1rem; height:100%; background:#fbfcfe;
  transition:background .2s ease, border-color .2s ease;
}
.svc-item:hover{ background:#fff; border-color:#cfe0f2; }
.svc-item b{ display:block; color:var(--navy); font-size:.95rem; margin-bottom:.35rem; }
.svc-item p{ font-size:.86rem; margin:0; line-height:1.6; }
.svc-item .lbl{
  display:block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:.85rem 0 .45rem;
  padding-top:.7rem; border-top:1px dashed var(--line);
}
.svc-item .chips{ display:flex; flex-wrap:wrap; gap:.3rem; }
.svc-item .chips span{
  font-size:.73rem; font-weight:500; color:var(--navy); background:#eef4fb;
  border:1px solid #dbe7f4; border-radius:100px; padding:.2rem .6rem;
}

/* ---------- vertical tabs (technology) ---------- */
.tech-nav{ display:flex; flex-direction:column; gap:.35rem; }
.tech-nav .nav-link{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:9px; padding:.7rem .9rem;
  color:var(--body); font-size:.9rem; font-weight:600; transition:all .2s ease;
}
.tech-nav .nav-link .n{
  width:26px; height:26px; flex:0 0 26px; border-radius:6px; display:grid; place-items:center;
  background:var(--sky-soft); color:var(--blue); font-size:.72rem; font-weight:700;
}
.tech-nav .nav-link:hover{ border-color:#bcd3ec; color:var(--navy); }
.tech-nav .nav-link.active{ background:linear-gradient(140deg,var(--blue),var(--navy)); border-color:transparent; color:#fff; }
.tech-nav .nav-link.active .n{ background:rgba(255,255,255,.2); color:#fff; }
@media (max-width:991.98px){ .tech-nav{ flex-direction:row; flex-wrap:wrap; } .tech-nav .nav-link{ width:auto; } }

/* ---------- category cards (services / technology) ---------- */
.cat{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:1.5rem 1.4rem; height:100%;
  position:relative; overflow:hidden; box-shadow:0 14px 34px -28px rgba(21,70,118,.55);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--sky),var(--blue)); opacity:0; transition:opacity .25s ease;
}
.cat:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(21,70,118,.6); border-color:#cfe0f2; }
.cat:hover::before{ opacity:1; }
.cat-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:.8rem; }
.cat-head .ico{
  width:46px; height:46px; flex:0 0 46px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--navy)); color:#fff; font-size:1.2rem;
  box-shadow:0 10px 22px -14px rgba(21,70,118,.9);
}
.cat-head .k{ display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); font-weight:700; }
.cat-head h3{ font-size:1.05rem; margin:0; }
.cat-sub{ font-size:.88rem; margin-bottom:1rem; }
.cat-list{ list-style:none; padding:0; margin:0; }
.cat-list li{ padding:.65rem 0; border-top:1px dashed var(--line); }
.cat-list li b{ display:block; color:var(--navy); font-size:.9rem; font-weight:600; }
.cat-list li span{ display:block; font-size:.83rem; color:var(--body); line-height:1.55; }
.tech-chips{ display:flex; flex-wrap:wrap; gap:.4rem; border-top:1px dashed var(--line); padding-top:.9rem; }
.tech-chips span{
  font-size:.79rem; font-weight:500; color:var(--navy); background:#f5f9fd;
  border:1px solid #dee8f3; border-radius:100px; padding:.28rem .7rem;
}

/* ---------- services / technology cards ---------- */
.svc{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:1.5rem 1.35rem; height:100%;
  position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--sky),var(--blue)); opacity:0; transition:opacity .25s ease;
}
.svc:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -26px rgba(21,70,118,.55); border-color:#cfe0f2; }
.svc:hover::before{ opacity:1; }
.svc .ico{
  width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--navy)); color:#fff; font-size:1.2rem; margin-bottom:1rem;
  box-shadow:0 10px 22px -14px rgba(21,70,118,.9);
}
.svc h3{ font-size:1.02rem; margin-bottom:.45rem; }
.svc p{ font-size:.89rem; margin:0; }

.tool-line{ font-size:.92rem; padding:.6rem 0; border-bottom:1px dashed var(--line); }
.tool-line:last-child{ border-bottom:0; }
.tool-line b{ color:var(--navy); display:inline-block; min-width:160px; }

.year-line{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.year-line:last-child{ border-bottom:0; }
.year-line .y{ color:var(--sky); font-weight:800; min-width:54px; }
.year-line .t{ color:var(--navy); font-weight:600; min-width:180px; }

.list-tick{ list-style:none; padding:0; margin:0; }
.list-tick li{ position:relative; padding-left:1.5rem; margin-bottom:.45rem; font-size:.93rem; }
.list-tick li::before{ content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:0; color:var(--sky); font-size:.85rem; }

.info-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:1.35rem 1.5rem; }
.info-card h3{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.8rem; }
.info-table{ width:100%; font-size:.9rem; }
.info-table th,.info-table td{ padding:.5rem .1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.info-table th{ color:var(--muted); font-weight:500; width:45%; text-align:left; }
.info-table td{ color:var(--navy); font-weight:600; }
.info-table tr:last-child th,.info-table tr:last-child td{ border-bottom:0; }

/* ---------- footer ---------- */
.foot-top{ background:linear-gradient(180deg,#fff,#eef6fc); padding:clamp(2.6rem,5vw,4rem) 0 4.5rem; position:relative; overflow:hidden; }
.foot-top h3{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; }
.foot-social{ display:flex; gap:1.1rem; font-size:1.5rem; }
.foot-social a{ color:var(--navy); }
.foot-social a:hover{ color:var(--sky); }
.addr-row{ display:flex; gap:.9rem; margin-bottom:1.1rem; }
.addr-row i{ color:var(--navy); font-size:1.15rem; margin-top:.2rem; }
.addr-row div{ color:var(--navy); font-weight:600; font-size:.93rem; }
.skyline{ position:absolute; left:0; right:0; bottom:0; height:96px; opacity:.22; pointer-events:none; }
.foot-bottom{ background:var(--navy) var(--pattern); background-blend-mode:soft-light; color:#dbe9f6; padding:1rem 0; font-size:.86rem; text-align:center; }
.foot-bottom a{ color:#fff; margin:0 .7rem; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- back to top ---------- */
#toTop{
  position:fixed; left:18px; bottom:24px; width:42px; height:42px; border-radius:50%; z-index:1040;
  display:grid; place-items:center; color:#fff; background:var(--navy); border:0;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:all .25s ease;
}
#toTop.show{ opacity:1; visibility:visible; }
#toTop:hover{ background:var(--sky); }