/* Sebitech Solutions - light theme. Tokens first; edit here to restyle everything. */
:root {
   --blue: #2425B5;
   --ink: #17245C;
   --red: #F12D3A;
   --orange: #F47719;
   --sb: #F2F6FF;
   --sr: #FFF3F3;
   --so: #FFF7ED;
   --text: #252B3A;
   --muted: #687386;
   --line: #E5E9F2;
   --r: 16px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font: 400 1rem/1.65 Manrope, Inter, system-ui, sans-serif;
   color: var(--text);
   background: #fff
}

img {
   max-width: 100%;
   height: auto
}

a {
   color: var(--blue)
}

h1,
h2,
h3 {
   color: var(--ink);
   line-height: 1.15;
   letter-spacing: -.02em
}

h1 {
   font-size: clamp(2rem, 5vw, 3.4rem);
   margin: .3em 0
}

h2 {
   font-size: clamp(1.5rem, 3vw, 2.2rem)
}

.wrap {
   max-width: 1160px;
   margin: auto;
   padding: 0 20px
}

.narrow {
   max-width: 760px
}

.muted {
   color: var(--muted)
}

.small {
   font-size: .9rem
}

.lead {
   font-size: 1.15rem;
   color: var(--muted)
}

:focus-visible {
   outline: 3px solid var(--orange);
   outline-offset: 2px
}

.skip {
   position: absolute;
   left: -999px
}

.skip:focus {
   left: 10px;
   top: 10px;
   background: #fff;
   padding: 8px;
   z-index: 99
}

.btn {
   display: inline-block;
   background: var(--blue);
   color: #fff;
   padding: 12px 22px;
   border-radius: 999px;
   font-weight: 700;
   text-decoration: none;
   min-height: 44px;
   border: 2px solid var(--blue);
   cursor: pointer;
   font-family: inherit;
   font-size: 1rem
}

.btn:hover {
   background: var(--ink);
   border-color: var(--ink)
}

.btn.ghost {
   background: #fff;
   color: var(--blue)
}

.btn.ghost:hover {
   background: var(--sb)
}

.row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 1.5rem 0
}

.site-header {
   position: sticky;
   top: 0;
   background: #fff;
   border-bottom: 1px solid var(--line);
   z-index: 50
}

.bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 76px
}

.brand img {
   display: block;
   width: 84px;
   height: auto
}

.nav ul {
   list-style: none;
   margin: 0;
   padding: 0
}

.nav a {
   text-decoration: none;
   color: var(--ink);
   font-weight: 600
}

.nav-toggle {
   display: block;
   width: 46px;
   height: 46px;
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 12px
}

.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--ink);
   margin: auto;
   position: relative;
   content: ""
}

.nav-toggle span:before {
   top: -6px
}

.nav-toggle span:after {
   top: 4px
}

.nav {
   display: none;
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   background: #fff;
   padding: 12px 20px 20px;
   border-bottom: 1px solid var(--line);
   max-height: 80vh;
   overflow: auto
}

.nav.open {
   display: block
}

.nav>ul>li>a {
   display: inline-block;
   padding: 10px 0
}

.has-sub {
   position: relative
}

.sub-toggle {
   background: none;
   border: 0;
   font-size: 1rem;
   padding: 10px;
   cursor: pointer;
   color: var(--ink)
}

.sub {
   display: none;
   padding-left: 14px !important
}

.has-sub.open .sub {
   display: block
}

.sub a {
   display: block;
   padding: 6px 0;
   font-weight: 500
}

.nav .btn {
   color: #fff;
   margin-top: 10px
}

.hero {
   padding: 48px 0;
   background: linear-gradient(180deg, var(--sb), #fff)
}

.eyebrow {
   font-weight: 700;
   color: var(--red);
   letter-spacing: .08em;
   font-size: .85rem;
   margin: 0
}

.two {
   display: grid;
   gap: 36px;
   align-items: center
}

.visual {
   position: relative;
   min-height: 340px
}

.mock {
   position: absolute;
   background: #fff;
   border: 1.5px solid #c9d3f5;
   border-radius: 14px;
   padding: 12px;
   box-shadow: 0 10px 30px rgba(36, 37, 181, .1);
   font-size: .75rem
}

.mock.main {
   inset: 20px 14% 40px 6%;
   z-index: 1
}

.mock i {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--red);
   margin-right: 4px
}

.mock i:nth-child(2) {
   background: var(--orange)
}

.mock i:nth-child(3) {
   background: var(--blue)
}

.mock b {
   display: block;
   height: 8px;
   border-radius: 4px;
   background: var(--line);
   margin: 8px 0
}

.l1 {
   width: 70%;
   background: var(--blue) !important
}

.l2 {
   width: 90%
}

.l3 {
   width: 50%
}

.l3.r {
   background: var(--red) !important
}

.blk {
   height: 70px;
   border-radius: 10px;
   background: var(--sb);
   margin-top: 12px
}

.tile {
   display: inline-block;
   width: 36px;
   height: 36px;
   border-radius: 8px;
   background: var(--sb);
   margin: 6px 6px 0 0
}

.tile.o {
   background: var(--so)
}

.tile.r {
   background: var(--sr)
}

.s1 {
   width: 130px;
   top: 0;
   right: 0;
   z-index: 2
}

.s2 {
   width: 130px;
   bottom: 0;
   right: 2%;
   z-index: 2
}

.s3 {
   width: 120px;
   bottom: 0;
   left: 0;
   z-index: 2
}

.s4 {
   width: 100px;
   top: 0;
   left: 0;
   z-index: 2
}

.s2 svg {
   width: 100%
}

.sec {
   padding: 56px 0
}

.soft {
   background: var(--sb)
}

.cats {
   display: grid;
   gap: 18px;
   margin-top: 24px
}

.cat {
   display: block;
   padding: 28px;
   border-radius: var(--r);
   text-decoration: none;
   color: var(--text);
   border: 1px solid var(--line)
}

.cat h3 {
   margin: 0 0 8px
}

.cat span {
   font-weight: 700;
   color: var(--blue)
}

.c1 {
   background: var(--sb)
}

.c2 {
   background: var(--sr);
   border-left: 6px solid var(--red)
}

.c3 {
   background: #fff;
   border: 2px solid var(--blue);
   border-top-width: 6px
}

.pairs,
.ticks {
   list-style: none;
   padding: 0
}

.pairs li {
   padding: 14px 0;
   border-bottom: 1px solid var(--line)
}

.pairs b {
   display: block;
   color: var(--ink)
}

.ticks li {
   padding: 6px 0 6px 28px;
   position: relative
}

.ticks li:before {
   content: "✓";
   position: absolute;
   left: 0;
   color: var(--orange);
   font-weight: 800
}

.chips {
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.chips a {
   display: block;
   padding: 10px 18px;
   border: 1px solid var(--line);
   border-radius: 999px;
   text-decoration: none;
   font-weight: 600
}

.chips a:hover {
   background: var(--sb)
}

.steps {
   list-style: none;
   padding: 0;
   display: grid;
   gap: 14px;
   counter-reset: s
}

.steps li {
   counter-increment: s;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r);
   padding: 16px 16px 16px 60px;
   position: relative
}

.steps li:before {
   content: counter(s);
   position: absolute;
   left: 16px;
   top: 16px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 700
}

.steps b {
   display: block;
   color: var(--ink)
}

details {
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 14px 18px;
   margin: 10px 0
}

summary {
   cursor: pointer;
   font-weight: 700;
   color: var(--ink)
}

.crumbs {
   font-size: .85rem;
   color: var(--muted);
   margin: 0
}

.crumbs a {
   color: var(--muted)
}

.page-hero {
   padding: 40px 0;
   background: linear-gradient(180deg, var(--so), #fff)
}

.sec ul.bul {
   padding-left: 20px
}

.sec ul.bul li {
   margin: 4px 0
}

.cta-band {
   background: var(--blue);
   color: #fff;
   padding: 48px 0;
   text-align: center
}

.cta-band h2 {
   color: #fff
}

.cta-band .btn {
   background: #fff;
   color: var(--blue);
   border-color: #fff
}

.site-footer {
   background: var(--sb);
   padding: 40px 0 20px;
   border-top: 1px solid var(--line)
}

.foot {
   display: grid;
   gap: 24px
}

.foot ul {
   list-style: none;
   padding: 0
}

.foot a {
   color: var(--ink)
}

.foot h3 {
   font-size: 1rem
}

.copy {
   color: var(--muted);
   font-size: .85rem
}

.filters {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 16px 0
}

.filters button {
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 999px;
   padding: 8px 16px;
   cursor: pointer;
   font: inherit
}

.filters button[aria-pressed=true] {
   background: var(--blue);
   color: #fff
}

.grid {
   display: grid;
   gap: 18px
}

.card {
   border: 1px dashed #b9c4ec;
   border-radius: var(--r);
   padding: 20px;
   background: #fff
}

.card .ph {
   height: 120px;
   border-radius: 10px;
   background: var(--sb);
   margin-bottom: 12px;
   display: grid;
   place-items: center;
   color: var(--muted);
   font-size: .8rem
}

.card[hidden] {
   display: none
}

form.enq {
   display: grid;
   gap: 16px
}

label {
   font-weight: 600;
   color: var(--ink);
   display: block
}

input,
select,
textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #c5cde0;
   border-radius: 10px;
   font: inherit;
   margin-top: 4px
}

.err {
   color: #b4121e;
   font-size: .85rem;
   min-height: 1em;
   display: block
}

input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
   border-color: var(--red)
}

.status {
   font-weight: 600
}

@media(min-width:768px) {
   .two {
      grid-template-columns: 1fr 1fr
   }

   .cats {
      grid-template-columns: repeat(3, 1fr)
   }

   .steps {
      grid-template-columns: repeat(5, 1fr)
   }

   .steps li {
      padding: 56px 14px 14px
   }

   .grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .foot {
      grid-template-columns: 1.5fr 1fr 1fr 1.5fr
   }

   .hero {
      padding: 72px 0
   }

   .visual {
      min-height: 420px
   }

   .mock {
      font-size: .85rem
   }
}

@media(min-width:1024px) {
   .nav-toggle {
      display: none
   }

   .nav {
      display: flex !important;
      position: static;
      padding: 0;
      border: 0;
      align-items: center;
      gap: 22px;
      max-height: none;
      overflow: visible
   }

   .nav>ul {
      display: flex;
      gap: 20px;
      align-items: center
   }

   .nav .btn {
      margin: 0
   }

   .sub {
      position: absolute;
      top: 100%;
      left: -12px;
      min-width: 270px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 16px !important;
      box-shadow: 0 12px 30px rgba(23, 36, 92, .1)
   }

   .has-sub:hover .sub,
   .has-sub.open .sub {
      display: block
   }

   .sub-toggle {
      padding: 10px 4px
   }

   .brand img {
      width: 100px
   }

   .grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   * {
      transition: none !important;
      animation: none !important
   }
}

/* Images: every slot hides itself if the file is missing (see main.js) */
.fig {
   margin: 0
}

.fig img,
.cat-img,
.card .thumb {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 12px
}

.fig img {
   border: 1px solid var(--line);
   background: #fff
}

.cat-img,
.card .thumb {
   aspect-ratio: 3/2;
   object-fit: cover;
   margin-bottom: 14px
}

.cat-img {
   aspect-ratio: 8/5
}

.hero-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   z-index: 5;
   background: #fff;
   border-radius: var(--r)
}

.ph {
   position: relative;
   overflow: hidden
}

.ph img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.noimg {
   grid-template-columns: 1fr !important
}

.page-hero .noimg>div {
   max-width: 760px
}

/* ===== Motion =====
   Reveal + parallax states only exist while assets/js/motion.js is running (html.mo), so the site stays fully visible without it.
   Hover effects are CSS-only and limited to devices that can hover. */
:root {
   --ease: cubic-bezier(.2, .7, .2, 1)
}

/* Smooth scroll (Lenis): let it drive scrolling instead of CSS smooth-scroll */
html.lenis,
html.lenis body {
   height: auto
}

.lenis.lenis-smooth {
   scroll-behavior: auto !important
}

.lenis.lenis-smooth [data-lenis-prevent] {
   overscroll-behavior: contain
}

.lenis.lenis-stopped {
   overflow: hidden
}

/* Scroll reveals: fade + rise */
html.mo .rv {
   opacity: 0;
   transform: translate3d(0, 36px, 0);
   transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms)
}

html.mo .rv.in {
   opacity: 1;
   transform: none
}

/* Headings: words rise out of a mask */
html.mo .w {
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
   padding-bottom: .14em;
   margin-bottom: -.14em
}

html.mo .w>span {
   display: inline-block;
   transform: translate3d(0, 110%, 0);
   transition: transform 1s var(--ease) calc(var(--d, 0ms) + var(--i, 0)*55ms)
}

html.mo .rv-w.in .w>span {
   transform: none
}

/* Images: clipped, slightly oversized so parallax (set from JS via `translate`) never shows an edge */
.fig {
   border: 1px solid var(--line);
   border-radius: 12px;
   overflow: hidden;
   background: #fff
}

.fig img {
   border: 0;
   border-radius: 0
}

.pxw {
   display: block;
   overflow: hidden;
   border-radius: 12px;
   margin-bottom: 14px
}

.pxw:empty {
   display: none
}

.pxw .cat-img,
.pxw .thumb {
   margin: 0;
   border-radius: 0
}

html.mo .fig img,
html.mo .pxw img,
html.mo .ph img {
   scale: 1.12;
   transition: scale 1.2s var(--ease)
}

html.mo .fig.rv:not(.in) img,
html.mo .rv:not(.in) .pxw img,
html.mo .rv:not(.in) .ph img {
   scale: 1.26
}

/* Hover micro-interactions */
@media(hover:hover) {

   /* underline that draws in from the left and leaves to the right */
   .nav>ul>li>a,
   .sub a,
   .foot a,
   .crumbs a {
      position: relative
   }

   .nav>ul>li>a:after,
   .sub a:after,
   .foot a:after,
   .crumbs a:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 2px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .4s var(--ease)
   }

   .nav>ul>li>a:after {
      bottom: 6px
   }

   .sub a {
      width: fit-content
   }

   .foot a:after,
   .crumbs a:after {
      bottom: -2px
   }

   .nav>ul>li>a:hover:after,
   .sub a:hover:after,
   .foot a:hover:after,
   .crumbs a:hover:after {
      transform: scaleX(1);
      transform-origin: left
   }

   .nav a:hover,
   .foot a:hover {
      color: var(--blue)
   }

   /* buttons */
   .btn {
      transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease)
   }

   .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(36, 37, 181, .28)
   }

   .btn:active {
      transform: translateY(0);
      box-shadow: none
   }

   .cta-band .btn:hover {
      background: var(--sb);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .25)
   }

   /* cards: lift, shadow, image zoom, arrow nudge */
   .cat,
   .card,
   .steps li {
      transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s
   }

   .cat:hover,
   .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(23, 36, 92, .13)
   }

   .card:hover {
      border-color: var(--blue)
   }

   .steps li:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(23, 36, 92, .1);
      border-color: #c9d3f5
   }

   .steps li:before {
      transition: background .3s, transform .4s var(--ease)
   }

   .steps li:hover:before {
      background: var(--orange);
      transform: scale(1.12)
   }

   .cat:hover .pxw img,
   .card:hover .pxw img,
   .card:hover .ph img,
   .fig:hover img {
      scale: 1.2
   }

   .cat span:after {
      content: "\00a0→";
      content: "\00a0→" /"";
      position: relative;
      left: 0;
      transition: left .35s var(--ease)
   }

   .cat:hover span:after {
      left: 6px
   }

   /* chips, filters, accordions */
   .chips a {
      transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease)
   }

   .chips a:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
      transform: translateY(-2px)
   }

   .filters button:hover {
      border-color: var(--blue);
      color: var(--blue)
   }

   .filters button[aria-pressed=true]:hover {
      color: #fff
   }

   details:hover {
      border-color: #c9d3f5
   }

   summary:hover {
      color: var(--blue)
   }
}

.filters button {
   transition: background .25s, color .25s, border-color .25s
}

details {
   transition: background .3s, border-color .3s
}

details[open] {
   background: var(--sb)
}

details[open]>:not(summary) {
   animation: drop .45s var(--ease)
}

@keyframes drop {
   from {
      opacity: 0;
      transform: translateY(-8px)
   }
}

input,
select,
textarea {
   transition: border-color .25s, box-shadow .25s
}

input:focus,
select:focus,
textarea:focus {
   border-color: var(--blue);
   box-shadow: 0 0 0 4px rgba(36, 37, 181, .12)
}

/* Desktop Services dropdown: fade and slide instead of snapping open */
@media(min-width:1024px) {
   .sub {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s
   }

   .has-sub:hover .sub,
   .has-sub.open .sub,
   .has-sub:focus-within .sub {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s
   }
}

@media print {
   html.mo .rv {
      opacity: 1 !important;
      transform: none !important
   }

   html.mo .w>span {
      transform: none !important
   }
}

/* Reduced-motion visitors: fade only, no movement */
html.mo-soft .rv {
   transform: none;
   transition: opacity .8s ease var(--d, 0ms) !important
}

/* ===== Concept overlay: Web . Marketing . Software =====
   Decorative only (aria-hidden / pseudo-elements). Tune intensity with the opacity values below. */
.hero,
.page-hero,
.cta-band,
.sec {
   position: relative;
   overflow: hidden;
   isolation: isolate
}

.hero>.wrap,
.page-hero>.wrap {
   position: relative;
   z-index: 1
}

/* blueprint dot grid, fading out from the top-right */
.hero:before,
.page-hero:before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-image: radial-gradient(rgba(36, 37, 181, .24) 1.3px, transparent 1.6px);
   background-size: 26px 26px;
   -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 10%, #000, transparent 75%);
   mask-image: radial-gradient(ellipse 70% 90% at 85% 10%, #000, transparent 75%)
}

.deco {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none
}

.deco .blob {
   position: absolute;
   border-radius: 50%
}

.deco .b1 {
   width: 520px;
   height: 520px;
   right: -150px;
   top: -190px;
   background: radial-gradient(circle, rgba(36, 37, 181, .2), transparent 66%)
}

.deco .b2 {
   width: 460px;
   height: 460px;
   left: -170px;
   bottom: -230px;
   background: radial-gradient(circle, rgba(244, 119, 25, .24), transparent 66%)
}

.deco .ring {
   position: absolute;
   width: 260px;
   height: 260px;
   right: 12%;
   bottom: -100px;
   border: 2px dashed rgba(36, 37, 181, .22);
   border-radius: 50%;
   animation: spin 50s linear infinite
}

/* floating UI tokens: code, hashtag, growth, percent */
.deco .d {
   position: absolute;
   display: none;
   place-items: center;
   min-width: 46px;
   height: 46px;
   padding: 0 13px;
   border-radius: 14px;
   background: #fff;
   border: 1.5px solid #c9d3f5;
   box-shadow: 0 10px 24px rgba(36, 37, 181, .13);
   font: 800 .95rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   color: var(--blue);
   font-style: normal;
   animation: pop .8s var(--ease) both, float 7s ease-in-out .8s infinite
}

.d1 {
   top: 9%;
   left: 45%
}

.d2 {
   top: 12%;
   right: 3%;
   color: var(--red) !important
}

.d3 {
   bottom: 12%;
   left: 3%;
   color: var(--orange) !important;
   animation-delay: .2s, 1.6s !important
}

.d4 {
   bottom: 14%;
   right: 6%;
   color: #1b9a59 !important;
   animation-delay: .3s, 2.4s !important
}

.d5 {
   top: 46%;
   left: 47%;
   animation-delay: .4s, 3.2s !important
}

.d2,
.d4 {
   display: grid !important;
   opacity: .75
}

@media(min-width:768px) {
   .deco .d {
      display: grid
   }

   .d2,
   .d4 {
      opacity: 1
   }
}

@keyframes float {
   50% {
      transform: translateY(-14px) rotate(3deg)
   }
}

@keyframes pop {
   from {
      opacity: 0;
      transform: scale(.6)
   }
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

/* tinted sections: corner dot cluster; white sections: faint dashed ring */
.soft:before {
   content: "";
   position: absolute;
   right: -50px;
   top: -50px;
   width: 320px;
   height: 320px;
   z-index: -1;
   border-radius: 50%;
   background-image: radial-gradient(rgba(36, 37, 181, .2) 1.5px, transparent 2px);
   background-size: 22px 22px;
   -webkit-mask-image: radial-gradient(circle, #000, transparent 70%);
   mask-image: radial-gradient(circle, #000, transparent 70%)
}

main>.sec:not(.soft):nth-of-type(even):after {
   content: "";
   position: absolute;
   left: -130px;
   bottom: -130px;
   width: 320px;
   height: 320px;
   z-index: -1;
   border: 2px dashed rgba(244, 119, 25, .28);
   border-radius: 50%
}

/* headings: brand-gradient accent bar that draws in */
.sec h2:after {
   content: "";
   display: block;
   width: 56px;
   height: 4px;
   margin-top: 12px;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--blue), var(--red), var(--orange))
}

html.mo .sec h2.rv-w:after {
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .9s var(--ease) calc(var(--d, 0ms) + .45s)
}

html.mo .sec h2.rv-w.in:after {
   transform: none
}

/* process steps: dashed connector between the numbered circles */
@media(min-width:768px) {
   .steps li:not(:last-child):after {
      content: "";
      position: absolute;
      top: 30px;
      left: calc(16px + 38px);
      right: -18px;
      border-top: 2px dashed #c9d3f5
   }
}

/* CTA band: brand glow, concentric rings and dot grid */
.cta-band {
   background: radial-gradient(800px 380px at 90% -30%, rgba(244, 119, 25, .6), transparent 62%), radial-gradient(700px 380px at 0% 130%, rgba(241, 45, 58, .55), transparent 62%), var(--blue)
}

.cta-band:before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: repeating-radial-gradient(circle at 92% 130%, transparent 0 44px, rgba(255, 255, 255, .08) 44px 46px)
}

.cta-band:after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 340px;
   height: 100%;
   z-index: -1;
   background-image: radial-gradient(rgba(255, 255, 255, .28) 1.3px, transparent 1.7px);
   background-size: 24px 24px;
   -webkit-mask-image: linear-gradient(90deg, #000, transparent);
   mask-image: linear-gradient(90deg, #000, transparent)
}

/* footer: brand accent line + faint grid */
.site-footer {
   position: relative;
   background-image: radial-gradient(rgba(36, 37, 181, .09) 1.3px, transparent 1.6px);
   background-size: 24px 24px
}

.site-footer:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--blue), var(--red), var(--orange))
}

/* ===== Contact page: info panel + modern form card ===== */
.contact-sec {
   background: linear-gradient(180deg, #fff, var(--sb))
}

.contact-grid {
   display: grid;
   gap: 28px;
   align-items: start
}

.cinfo {
   background: linear-gradient(160deg, var(--ink), var(--blue));
   color: #fff;
   border-radius: 24px;
   padding: 32px 28px;
   position: relative;
   overflow: hidden
}

.cinfo:before {
   content: "";
   position: absolute;
   width: 260px;
   height: 260px;
   right: -90px;
   top: -90px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(244, 119, 25, .55), transparent 70%)
}

.cinfo:after {
   content: "";
   position: absolute;
   width: 240px;
   height: 240px;
   left: -90px;
   bottom: -90px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(241, 45, 58, .45), transparent 70%)
}

.cinfo>* {
   position: relative;
   z-index: 1
}

.cinfo h2 {
   color: #fff;
   margin: 0 0 8px
}

.cinfo h2:after {
   display: none
}

.cinfo .muted {
   color: rgba(255, 255, 255, .8);
   margin: 0 0 20px
}

.clist {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 12px
}

.ci {
   display: flex;
   gap: 14px;
   align-items: center;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 14px;
   padding: 12px 14px;
   backdrop-filter: blur(4px);
   transition: background .3s, transform .35s var(--ease, ease)
}

.ci:hover {
   background: rgba(255, 255, 255, .18);
   transform: translateX(4px)
}

.ci .ico {
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #fff;
   color: var(--blue)
}

.ci.c-g .ico {
   color: #1a9d55
}

.ci.c-r .ico {
   color: var(--red)
}

.ci.c-o .ico {
   color: var(--orange)
}

.ci b {
   display: block;
   font-size: .8rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .7);
   font-weight: 700
}

.ci a,
.ci span:not(.ico) {
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   word-break: break-word
}

.ci a:hover {
   text-decoration: underline
}

.next {
   margin-top: 26px;
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, .2)
}

.next h3 {
   color: #fff;
   margin: 0 0 12px;
   font-size: 1.05rem
}

.next ol {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 12px;
   counter-reset: n
}

.next li {
   counter-increment: n;
   position: relative;
   padding-left: 40px
}

.next li:before {
   content: counter(n);
   position: absolute;
   left: 0;
   top: 0;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--orange);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 800;
   font-size: .85rem
}

.next li b {
   display: block
}

.next li span {
   display: block;
   color: rgba(255, 255, 255, .78);
   font-size: .9rem
}

form.card-form {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 24px;
   padding: 28px 24px;
   box-shadow: 0 24px 60px rgba(23, 36, 92, .1)
}

.form-head h2 {
   margin: 0 0 6px
}

.form-head p {
   margin: 0
}

.fgrid {
   display: grid;
   gap: 16px
}

form.card-form input,
form.card-form select,
form.card-form textarea {
   background: #f8faff;
   border: 1.5px solid #d6ddef;
   border-radius: 12px;
   padding: 13px 14px;
   transition: border-color .25s, box-shadow .25s, background .25s
}

form.card-form input:hover,
form.card-form select:hover,
form.card-form textarea:hover {
   border-color: #aab6dd
}

form.card-form input:focus,
form.card-form select:focus,
form.card-form textarea:focus {
   background: #fff;
   border-color: var(--blue);
   box-shadow: 0 0 0 4px rgba(36, 37, 181, .12);
   outline: 0
}

form.card-form ::placeholder {
   color: #97a1b8;
   opacity: 1
}

form.card-form textarea {
   resize: vertical;
   min-height: 130px
}

form.card-form .btn {
   width: 100%;
   padding: 14px 22px;
   font-size: 1.05rem
}

form.card-form .status:empty {
   display: none
}

@media(min-width:640px) {
   .fgrid {
      grid-template-columns: 1fr 1fr
   }

   .fgrid .full {
      grid-column: 1/-1
   }

   form.card-form {
      padding: 36px
   }

   form.card-form .btn {
      width: auto;
      min-width: 220px
   }
}

@media(min-width:900px) {
   .contact-grid {
      grid-template-columns: 5fr 7fr;
      gap: 36px
   }

   .cinfo {
      padding: 40px 34px;
      position: sticky;
      top: 96px
   }
}

/* ===== Inner-page hero: deep brand gradient, glass visuals ===== */
.page-hero {
   padding: 48px 0 60px;
   color: #fff;
   background: radial-gradient(640px 380px at 88% -10%, rgba(244, 119, 25, .55), transparent 62%), radial-gradient(560px 380px at -5% 115%, rgba(241, 45, 58, .4), transparent 62%), linear-gradient(135deg, #121858 0%, #2425B5 62%, #3a3fd8 100%)
}

.page-hero:before {
   background-image: radial-gradient(rgba(255, 255, 255, .3) 1.3px, transparent 1.7px);
   -webkit-mask-image: radial-gradient(ellipse 75% 95% at 85% 15%, #000, transparent 75%);
   mask-image: radial-gradient(ellipse 75% 95% at 85% 15%, #000, transparent 75%)
}

.page-hero:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 5px;
   z-index: 2;
   background: linear-gradient(90deg, var(--orange), var(--red), #7b7dff)
}

.page-hero h1 {
   color: #fff;
   font-size: clamp(2rem, 4.6vw, 3.2rem);
   margin: .45em 0 .35em
}

.page-hero .lead {
   color: rgba(255, 255, 255, .86)
}

.page-hero .crumbs {
   color: rgba(255, 255, 255, .7)
}

.page-hero .crumbs a {
   color: #fff
}

.page-hero .btn {
   background: #fff;
   color: var(--blue);
   border-color: #fff;
   box-shadow: 0 10px 26px rgba(8, 10, 60, .3)
}

.page-hero .btn:hover {
   background: var(--orange);
   border-color: var(--orange);
   color: #fff
}

.page-hero .deco .b1 {
   background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 66%)
}

.page-hero .deco .b2 {
   background: radial-gradient(circle, rgba(244, 119, 25, .3), transparent 66%)
}

.page-hero .deco .ring {
   border-color: rgba(255, 255, 255, .28)
}

.page-hero .deco .d {
   background: rgba(255, 255, 255, .12);
   border-color: rgba(255, 255, 255, .35);
   color: #fff;
   box-shadow: 0 10px 24px rgba(8, 10, 60, .25);
   backdrop-filter: blur(6px)
}

.page-hero .deco .d2,
.page-hero .deco .d3,
.page-hero .deco .d4 {
   color: #fff !important
}

.page-hero .fig {
   border-color: rgba(255, 255, 255, .3);
   box-shadow: 0 26px 60px rgba(8, 10, 60, .45)
}

/* glass cards + visuals (right side of portfolio / blog / contact heroes) */
.hvis {
   position: relative;
   width: 100%;
   max-width: 520px;
   min-height: 320px;
   margin-inline: auto
}

.gc {
   background: rgba(255, 255, 255, .13);
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 18px;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 24px 50px rgba(8, 10, 60, .35);
   color: #fff
}

.sk {
   display: block;
   height: 8px;
   border-radius: 4px;
   background: rgba(255, 255, 255, .35);
   margin: 8px 0 0
}

.sk.k1 {
   width: 78%
}

.sk.k2 {
   width: 52%;
   background: rgba(255, 255, 255, .22)
}

.chip {
   position: absolute;
   z-index: 3;
   padding: 8px 16px;
   border-radius: 999px;
   background: #fff;
   color: var(--ink);
   font-weight: 800;
   font-size: .85rem;
   box-shadow: 0 12px 26px rgba(8, 10, 60, .3);
   animation: float 7s ease-in-out infinite
}

/* portfolio: three browser windows */
.win {
   position: absolute;
   padding: 12px 12px 14px;
   animation: float 8s ease-in-out infinite
}

.win .bar {
   display: flex;
   gap: 5px;
   margin-bottom: 10px
}

.win .bar i {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--red)
}

.win .bar i:nth-child(2) {
   background: var(--orange)
}

.win .bar i:nth-child(3) {
   background: #37d67a
}

.win .shot {
   height: 84px;
   border-radius: 10px
}

.s1 {
   background: linear-gradient(135deg, #7b7dff, #2425B5)
}

.s2 {
   background: linear-gradient(135deg, #ffb067, #F12D3A)
}

.s3 {
   background: linear-gradient(135deg, #6ee7a8, #1b9a59)
}

.w1 {
   top: 0;
   left: 0;
   width: 64%
}

.w2 {
   top: 78px;
   right: 0;
   width: 58%;
   animation-delay: -2.5s
}

.w3 {
   bottom: 0;
   left: 14%;
   width: 56%;
   animation-delay: -5s
}

.pv .ch1 {
   top: -4px;
   right: 6%
}

.pv .ch2 {
   top: 46%;
   left: -2%;
   animation-delay: -1.5s
}

.pv .ch3 {
   bottom: 22%;
   right: -1%;
   animation-delay: -3s
}

.pv .ch4 {
   bottom: -6px;
   left: 2%;
   animation-delay: -4.5s
}

/* blog: stacked article cards */
.bv {
   display: grid;
   gap: 16px;
   align-content: center
}

.art {
   display: flex;
   gap: 14px;
   align-items: center;
   padding: 16px;
   animation: float 8s ease-in-out infinite
}

.art.a2 {
   margin-left: 9%;
   animation-delay: -2.5s
}

.art.a3 {
   margin-left: 3%;
   animation-delay: -5s
}

.th {
   flex: none;
   width: 58px;
   height: 58px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   color: #fff
}

.t1 {
   background: linear-gradient(135deg, #ffb067, #F12D3A)
}

.t2 {
   background: linear-gradient(135deg, #7b7dff, #2425B5)
}

.t3 {
   background: linear-gradient(135deg, #6ee7a8, #1b9a59)
}

.art b {
   display: block;
   font-size: .95rem;
   line-height: 1.3;
   margin-top: 4px
}

.tag {
   display: inline-block;
   font-size: .7rem;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #ffd0a1
}

.bv .ch1 {
   top: -6px;
   right: 4%
}

.bv .ch2 {
   bottom: -6px;
   left: 8%;
   animation-delay: -3s
}

/* contact: chat mock + contact orbs */
.cv {
   display: grid;
   place-items: center
}

.chat {
   width: 88%;
   padding: 18px;
   margin: 10px 0 10px -6%;
   animation: float 9s ease-in-out infinite
}

.chead {
   display: flex;
   gap: 12px;
   align-items: center;
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .2);
   margin-bottom: 12px
}

.chead b {
   display: block
}

.chead small {
   color: rgba(255, 255, 255, .75)
}

.av {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #fff;
   color: var(--blue);
   font-weight: 800
}

.bub {
   margin: 8px 0;
   padding: 10px 14px;
   border-radius: 16px;
   max-width: 82%;
   font-size: .92rem;
   line-height: 1.4
}

.bub.me {
   margin-left: auto;
   background: #fff;
   color: var(--ink);
   border-bottom-right-radius: 4px
}

.bub.you {
   background: rgba(255, 255, 255, .2);
   border-bottom-left-radius: 4px
}

.typing {
   display: flex;
   gap: 5px;
   margin: 10px 0 0 auto;
   width: fit-content;
   padding: 10px 14px;
   border-radius: 16px;
   background: rgba(255, 255, 255, .2)
}

.typing i {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #fff;
   animation: blink 1.2s infinite
}

.typing i:nth-child(2) {
   animation-delay: .2s
}

.typing i:nth-child(3) {
   animation-delay: .4s
}

@keyframes blink {

   0%,
   80%,
   100% {
      opacity: .3
   }

   40% {
      opacity: 1
   }
}

.orb {
   position: absolute;
   z-index: 3;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #fff;
   box-shadow: 0 14px 30px rgba(8, 10, 60, .4);
   border: 3px solid rgba(255, 255, 255, .85);
   animation: float 7s ease-in-out infinite
}

.o1 {
   top: -4px;
   right: 2%;
   background: #25D366
}

.o2 {
   top: 42%;
   right: -3%;
   background: var(--blue);
   animation-delay: -2s
}

.o3 {
   bottom: -12px;
   left: 6%;
   background: var(--red);
   animation-delay: -4s
}

@media(max-width:767px) {
   .hvis {
      min-height: 290px;
      margin-top: 20px
   }

   .chat {
      width: 94%;
      margin-left: 0
   }

   .o2 {
      right: 0
   }
}

/* ===== Floating contact button (bottom right) ===== */
.fab {
   position: fixed;
   right: 18px;
   bottom: calc(18px + env(safe-area-inset-bottom, 0px));
   z-index: 70;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 12px
}

.fab-btn {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 0;
   cursor: pointer;
   color: #fff;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, var(--blue), #4a4ee0);
   box-shadow: 0 14px 30px rgba(36, 37, 181, .5);
   position: relative;
   transition: transform .35s var(--ease, ease), background .3s
}

.fab-btn:hover {
   transform: scale(1.07)
}

.fab-btn:before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid var(--orange);
   animation: fabpulse 2.4s ease-out infinite
}

.fab-btn svg {
   grid-area: 1/1;
   transition: transform .35s var(--ease, ease), opacity .25s
}

.fab-btn .i-close {
   opacity: 0;
   transform: rotate(-90deg) scale(.6)
}

.fab.open .fab-btn {
   background: linear-gradient(135deg, var(--red), var(--orange))
}

.fab.open .fab-btn:before {
   animation: none;
   opacity: 0
}

.fab.open .fab-btn .i-open {
   opacity: 0;
   transform: rotate(90deg) scale(.6)
}

.fab.open .fab-btn .i-close {
   opacity: 1;
   transform: none
}

.fab-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: flex-end
}

.fab-list li {
   opacity: 0;
   transform: translateY(16px) scale(.8);
   visibility: hidden;
   transition: opacity .3s, transform .4s var(--ease, ease), visibility 0s .4s
}

.fab.open .fab-list li {
   opacity: 1;
   transform: none;
   visibility: visible;
   transition: opacity .3s, transform .4s var(--ease, ease), visibility 0s
}

.fab.open .fab-list li:nth-child(3) {
   transition-delay: .04s
}

.fab.open .fab-list li:nth-child(2) {
   transition-delay: .09s
}

.fab.open .fab-list li:nth-child(1) {
   transition-delay: .14s
}

.fab-i {
   position: relative;
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 10px 24px rgba(23, 36, 92, .35);
   transition: transform .3s var(--ease, ease)
}

.fab-i:hover {
   transform: scale(1.1)
}

.fab-i.fab-wa {
   background: #25D366
}

.fab-i.fab-ph {
   background: var(--blue)
}

.fab-i.fab-ml {
   background: var(--red)
}

.fab-i .tip {
   position: absolute;
   right: calc(100% + 12px);
   top: 50%;
   transform: translateY(-50%);
   white-space: nowrap;
   background: #fff;
   color: var(--ink);
   font-weight: 700;
   font-size: .85rem;
   padding: 6px 12px;
   border-radius: 999px;
   box-shadow: 0 8px 20px rgba(23, 36, 92, .2)
}

@keyframes fabpulse {
   0% {
      transform: scale(1);
      opacity: .8
   }

   100% {
      transform: scale(1.55);
      opacity: 0
   }
}

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

   .chip,
   .win,
   .art,
   .chat,
   .orb,
   .fab-btn:before,
   .typing i {
      animation: none !important
   }

   .fab-list li {
      transition: none
   }
}

/* portfolio visual refinements */
.win {
   background: rgba(24, 30, 138, .78)
}

.win .bar {
   justify-content: flex-start;
   align-items: center
}

.win .bar i {
   display: block;
   flex: none;
   position: static;
   width: 9px;
   height: 9px;
   min-width: 0;
   padding: 0;
   animation: none;
   translate: none
}

.win .shot {
   height: 66px
}

.w1 {
   width: 56%
}

.w2 {
   top: 70px;
   width: 52%
}

.w3 {
   left: 20%;
   width: 54%
}

.bv .ch2 {
   bottom: -14px;
   left: auto;
   right: 10%
}