/* ============================================================
   BLUE BRAND — component rules (user side / frontend only).
   Uses ONLY the variables from colors.css. Loaded last so it
   sets the brand look on top of the base stylesheets.
   Fonts: Unbounded (headings), Manrope (body).
   ============================================================ */

/* ---- Base ---- */
body{
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
/* the page wrapper had the old grey (#e9edf2) — it showed as a band under short pages */
.page.body2{ background: transparent; }

h1,h2,h3,h4,h5,h6,
.card-title,.lp-title,.page-title{
  font-family: "Unbounded", "Manrope", sans-serif !important;
  color: var(--ink);
  font-weight: 700;
}

/* Secondary / muted text */
.text-muted,.text-secondary,small,.small,.lp-sub,.sub,.muted{
  color: var(--mut) !important;
}

/* ---- Links ---- */
a{ color: var(--royal); }
a:hover{ color: var(--blue); }

/* ---- Cards ---- */
.card,.lp-card,.login-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* ---- Primary buttons ---- */
.btn-primary,
.lp-btn-primary,
.login-button,
.my-button,
.dash-balance-btn,
.err404-btn{
  background: var(--royal) !important;
  border: 1px solid var(--royal) !important;
  color: var(--white) !important;
  border-radius: var(--radius-btn) !important;
}
.btn-primary:hover,
.lp-btn-primary:hover,
.login-button:hover,
.my-button:hover,
.dash-balance-btn:hover,
.err404-btn:hover{
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white) !important;
}

/* ---- Secondary / ghost buttons ---- */
.btn-outline-primary,
.btn-secondary,
.lp-btn-ghost,
.gbtn{
  background: var(--white) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-btn) !important;
}
.btn-outline-primary:hover,
.btn-secondary:hover,
.lp-btn-ghost:hover,
.gbtn:hover{
  border-color: var(--royal) !important;
  color: var(--royal) !important;
}

/* Generic button radius */
.btn{ border-radius: var(--radius-btn); }

/* ---- Forms ---- */
.form-control,.select2-container--default .select2-selection{
  border-color: var(--line) !important;
  color: var(--ink);
  border-radius: 12px;
}
.form-control:focus{
  border-color: var(--royal) !important;
  box-shadow: 0 0 0 3px rgba(30,79,216,.12) !important;
}

/* ---- Borders / dividers ---- */
hr,.divider,.dropdown-divider{ border-color: var(--line) !important; }

/* ---- Pills / tags / icon boxes ---- */
.badge-primary,.tag,.pill{ background: var(--ice); color: var(--royal); }

/* ---- Dark sections (footer / popular card) ---- */
.footer-dark,.section-dark,.lp-footer{
  background: var(--ink);
  color: var(--white);
}
/* Cyan highlight ONLY on dark backgrounds */
.footer-dark .hl,.section-dark .hl,.lp-footer .hl,.on-dark .hl{ color: var(--cyan); }

/* ---- Progress ---- */
.progress{ background: var(--pale) !important; }
.progress-bar{ background: var(--royal) !important; }

/* ============================================================
   PUBLIC HEADER + FOOTER (guest / public pages)
   A dark "ink" frame around the light pages: a glass header on top and
   a deep footer at the bottom. On the home page the header floats
   transparent over the hero and turns solid as soon as you scroll.
   Previous version: themes/blue/backups/brand_2026-11-01_v1.css
   ============================================================ */
:root{ --pub-nav-h: 72px; }
@media (max-width: 860px){ :root{ --pub-nav-h: 56px; } }

/* ---- Header bar ---- */
.pub-nav{
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* Brand royal glass (same blue as the client-area top bar). It lives on a layer behind the bar —
   a backdrop-filter on the bar itself would trap the fixed mobile menu panel inside the bar's box. */
.pub-nav::before{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: rgba(30,79,216,.94);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  transition: background-color .35s ease;
}
.pub-nav.is-scrolled{ box-shadow: 0 12px 30px -16px rgba(30,79,216,.6); }
.pub-nav.menu-open::before{ background: var(--royal); }
.pub-nav.is-home{ position: fixed; left: 0; right: 0; }
/* home, top of the page: a light blue tint over the hero instead of a solid bar */
.pub-nav.is-home:not(.is-scrolled):not(.menu-open){ border-bottom-color: rgba(255,255,255,.08); }
.pub-nav.is-home:not(.is-scrolled):not(.menu-open)::before{ background: rgba(30,79,216,.18); }
.pub-nav-inner{
  position: relative; max-width: 1200px; height: var(--pub-nav-h); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* brand */
.pub-brand{ display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; }
.pub-brand:hover, .pub-brand:focus{ text-decoration: none; }
.pub-mark{
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, var(--sky) -20%, var(--royal) 45%, var(--navy));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -10px rgba(30,79,216,.95);
}
.pub-mark svg{ width: 16px; height: 16px; fill: var(--white); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.pub-brand:hover .pub-mark svg{ transform: rotate(90deg); }
.pub-nav .pub-mark{ background: var(--white); box-shadow: 0 8px 20px -10px rgba(6,22,58,.55); }
.pub-nav .pub-mark svg{ fill: var(--royal); }
.pub-word{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -.02em; color: var(--white); white-space: nowrap; }
.pub-word b{ font-weight: 800; color: var(--white); }
.pub-word span{ font-weight: 600; color: var(--pale); }
.pub-logo{ display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain; }

/* links: a segmented pill in the middle of the bar */
.pub-nav-links{ flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.pub-nav-main{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
}
.pub-link, .pub-dd-toggle{
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 17px; border-radius: 999px;
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1;
  color: rgba(255,255,255,.86); transition: color .2s, background-color .2s;
}
.pub-link:hover, .pub-link:focus, .pub-dd-toggle:hover{ color: var(--white); text-decoration: none; }
.pub-link.active, .pub-dd-toggle.active, .pub-dd.open .pub-dd-toggle{ color: var(--white); background: rgba(255,255,255,.2); }
.pub-dd-toggle i{ font-size: 11px; opacity: .8; transition: transform .25s ease; }
.pub-dd.open .pub-dd-toggle i{ transform: rotate(180deg); }
.pub-dd-toggle:focus, .pub-nav-toggle:focus{ outline: none; box-shadow: none; }
.pub-link:focus-visible, .pub-dd-toggle:focus-visible, .pub-login:focus-visible,
.pub-cta-btn:focus-visible, .pub-nav-toggle:focus-visible, .pub-brand:focus-visible{ outline: 2px solid var(--sky); outline-offset: 2px; }

/* right side */
.pub-nav-cta{ display: flex; align-items: center; gap: 6px; }
.pub-login{
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 12px;
  font-weight: 700; font-size: 14.5px; color: var(--white); text-decoration: none; transition: background-color .2s;
}
.pub-login:hover, .pub-login:focus, .pub-login.active{ color: var(--white); background: rgba(255,255,255,.16); text-decoration: none; }
.pub-cta-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 12px;
  background: var(--white); color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(6,22,58,.5);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.pub-cta-btn i{ font-size: 12px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.pub-cta-btn:hover, .pub-cta-btn:focus{ color: var(--ink); text-decoration: none; transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(6,22,58,.55); }
.pub-cta-btn:hover i{ transform: translateX(3px); }

/* Services dropdown (desktop): click to open, sits left-aligned under the label */
.pub-dd{ position: relative; }
.pub-dd-menu{
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 1001; display: none;
  width: 370px; padding: 10px; border-radius: 20px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(6,22,58,.35);
}
.pub-dd.open .pub-dd-menu{ display: block; animation: pubFade .2s ease; }
@keyframes pubFade{ from{ opacity: 0; } }
.pub-dd-label{
  display: block; padding: 8px 12px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mut);
}
.pub-dd-item{
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px;
  text-decoration: none; transition: background-color .2s;
}
.pub-dd-item:hover, .pub-dd-item:focus, .pub-dd-item.active{ background: var(--ice); text-decoration: none; }
.pub-dd-ico{
  display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--ice); border: 1px solid var(--line); color: var(--royal); font-size: 17px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.pub-dd-item:hover .pub-dd-ico, .pub-dd-item.active .pub-dd-ico{ background: var(--royal); border-color: var(--royal); color: var(--white); }
.pub-dd-txt{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pub-dd-txt b{ font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.2; color: var(--ink); }
.pub-dd-txt span{ font-size: 12.5px; line-height: 1.3; color: var(--mut); }
.pub-dd-all{
  display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 13px 12px 6px;
  border-top: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--royal); text-decoration: none;
}
.pub-dd-all:hover, .pub-dd-all:focus, .pub-dd-all.active{ color: var(--blue); text-decoration: none; }
.pub-dd-all i{ font-size: 12px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.pub-dd-all:hover i{ transform: translateX(4px); }

/* hamburger (two lines -> X) */
.pub-nav-toggle{
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
}
.pub-nav-toggle span{ display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.pub-nav-toggle[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.pub-nav-toggle[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }
/* narrow desktops (861–1000px): a little less padding so the 4-link pill keeps clear of the buttons */
@media (min-width: 861px) and (max-width: 1000px){ .pub-link, .pub-dd-toggle{ padding: 0 13px; } }
html.pub-lock, html.pub-lock body{ overflow: hidden !important; }
html.pub-lock .chat-float{ visibility: hidden; opacity: 0; pointer-events: none; }   /* floating WhatsApp button sat over the menu's buttons */

@media (max-width: 860px){
  .pub-nav-inner{ gap: 12px; }
  .pub-mark{ width: 30px; height: 30px; border-radius: 9px; }
  .pub-mark svg{ width: 14px; height: 14px; }
  .pub-word{ font-size: 18px; }
  .pub-logo{ height: 30px; }
  .pub-nav-toggle{ display: inline-flex; }

  /* menu: a light card that drops under the bar — only as tall as its content */
  .pub-nav-links{
    position: fixed; top: calc(var(--pub-nav-h) + 8px); left: 10px; right: 10px; bottom: auto;
    max-height: calc(100vh - var(--pub-nav-h) - 20px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px;
    padding: 6px 14px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--white); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 24px 50px -18px rgba(6,22,58,.45);
    visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .pub-nav-links.open{ visibility: visible; opacity: 1; transition: opacity .2s ease; }
  /* page behind the card is dimmed; tapping it closes the menu */
  .pub-nav.menu-open::after{
    content: ""; position: fixed; top: var(--pub-nav-h); left: 0; right: 0; bottom: 0; z-index: -1;
    background: rgba(6,22,58,.4); animation: pubFade .2s ease;
  }
  .pub-nav-main{
    position: static; transform: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0; border: 0; border-radius: 0; background: none;
  }
  .pub-link, .pub-dd-toggle{
    width: 100%; height: auto; padding: 13px 4px; border-radius: 0; justify-content: flex-start;
    font-family: "Unbounded", sans-serif; font-size: 16px; color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .pub-link:hover, .pub-link:focus, .pub-dd-toggle:hover{ color: var(--royal); }
  .pub-link.active, .pub-dd-toggle.active, .pub-dd.open .pub-dd-toggle{ background: none; color: var(--ink); }
  .pub-link.active, .pub-dd-toggle.active, .pub-dd.open .pub-dd-toggle.active{ color: var(--royal); }
  /* the current page gets a small dot before its name */
  .pub-link.active::before, .pub-dd-toggle.active::before{
    content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-right: 11px; border-radius: 50%;
    background: var(--royal); box-shadow: 0 0 0 4px var(--ice);
  }
  .pub-dd-toggle i{ margin-left: auto; font-size: 12px; color: var(--mut); }

  /* submenu: indented list on a guide line, so it reads as part of Services (no box) */
  .pub-dd-menu{
    position: static; width: auto; margin: 6px 0 2px 4px; padding: 0 0 0 10px; border-radius: 0;
    background: none; border: 0; border-left: 2px solid var(--ice); box-shadow: none;
  }
  .pub-dd.open .pub-dd-menu{ animation: none; }
  .pub-dd-label{ display: none; }
  .pub-dd-item{ gap: 12px; padding: 7px 8px; border-radius: 12px; }
  .pub-dd-ico{ width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .pub-dd-txt{ gap: 2px; }
  .pub-dd-txt b{ font-size: 14.5px; }
  .pub-dd-txt span{ font-size: 12px; }
  .pub-dd-all{ margin-top: 0; padding: 9px 8px 4px; border-top: 0; font-size: 13.5px; }

  /* buttons side by side, so the card stays short */
  .pub-nav-cta{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pub-login, .pub-cta-btn{ height: 46px; border-radius: 13px; font-size: 15px; }
  .pub-login{ color: var(--ink); background: var(--white); border: 1px solid var(--line); }
  .pub-login:hover, .pub-login:focus, .pub-login.active{ color: var(--royal); background: var(--ice); border-color: var(--pale); }
  .pub-cta-btn{ color: var(--white); background: var(--royal); box-shadow: 0 10px 22px -12px rgba(30,79,216,.8); }
  .pub-cta-btn:hover, .pub-cta-btn:focus{ color: var(--white); background: var(--blue); }
}

/* ---- Footer ---- */
.pub-footer{
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 64px; background: var(--ink); color: var(--pale);
}
.pub-footer.is-home{ margin-top: 0; }
.pub-footer::before{
  content: ""; position: absolute; z-index: -1; left: -300px; top: -540px; width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,79,216,.42), transparent 62%); pointer-events: none;
}
.pub-footer::after{
  content: ""; position: absolute; z-index: -1; right: -260px; bottom: -420px; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,163,255,.14), transparent 60%); pointer-events: none;
}
.pub-footer-inner{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pub-footer-top{ display: grid; grid-template-columns: 1.15fr 2fr; gap: 56px; padding: 80px 0 60px; }
.pub-footer-brand .pub-brand{ margin-bottom: 20px; }
.pub-footer-tag{ max-width: 340px; margin: 0 0 26px; font-size: 15px; line-height: 1.7; color: rgba(191,219,254,.72); }
.pub-footer-wa{
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(191,219,254,.16); text-decoration: none;
  transition: background-color .25s, border-color .25s;
}
.pub-footer-wa:hover, .pub-footer-wa:focus{ background: rgba(255,255,255,.08); border-color: rgba(191,219,254,.36); text-decoration: none; }
.pub-footer-wa > i{
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--royal); color: var(--white); font-size: 18px;
}
.pub-footer-wa > span{ display: flex; flex-direction: column; gap: 3px; }
.pub-footer-wa b{ font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--white); }
.pub-footer-wa > span > span{ font-size: 12.5px; line-height: 1.2; color: rgba(191,219,254,.65); }

.pub-footer-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pub-footer-col h6{
  margin: 0 0 18px; font-family: "Manrope", sans-serif !important; font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(191,219,254,.5);
}
.pub-footer-col a{
  display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 14.5px; font-weight: 500;
  color: rgba(191,219,254,.8); text-decoration: none; transition: color .2s;
}
.pub-footer-col a i{ width: 16px; text-align: center; font-size: 13px; color: var(--sky); }
.pub-footer-col a:hover, .pub-footer-col a:focus{ color: var(--white); text-decoration: none; }

.pub-footer-bottom{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px;
  padding: 22px 0; border-top: 1px solid rgba(191,219,254,.1); font-size: 13.5px; color: rgba(191,219,254,.6);
}
.pub-footer-legal{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.pub-footer-legal a{ color: rgba(191,219,254,.6); text-decoration: none; transition: color .2s; }
.pub-footer-legal a:hover, .pub-footer-legal a:focus{ color: var(--white); text-decoration: none; }
.pub-totop{
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--pale);
}
.pub-totop i{
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(191,219,254,.24); font-size: 13px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .25s, color .25s, border-color .25s;
}
.pub-totop:hover{ color: var(--white); }
.pub-totop:hover i{ transform: translateY(-3px); background: var(--white); border-color: var(--white); color: var(--ink); }
.pub-totop:focus{ outline: none; }
.pub-totop:focus-visible i{ outline: 2px solid var(--sky); outline-offset: 2px; }

/* client area (logged in): a slim light bar instead of the marketing footer */
.pub-footer.is-compact{ margin-top: 48px; background: transparent; color: var(--mut); overflow: visible; }
.pub-footer.is-compact::before, .pub-footer.is-compact::after{ display: none; }
.pub-footer.is-compact .pub-footer-bottom{ border-top-color: var(--line); color: var(--mut); }
.pub-footer.is-compact .pub-footer-legal a{ color: var(--mut); }
.pub-footer.is-compact .pub-footer-legal a:hover{ color: var(--royal); }
body:has(.chat-float) .pub-footer.is-compact .pub-footer-bottom{ padding-bottom: 92px; }   /* keep the text clear of the floating chat button */

@media (max-width: 960px){
  .pub-footer-top{ grid-template-columns: 1fr; gap: 44px; padding: 64px 0 48px; }
}
@media (max-width: 600px){
  .pub-footer-top{ padding: 56px 0 40px; }
  .pub-footer-cols{ grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .pub-footer-bottom{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .pub-totop{ align-self: flex-end; }   /* right side, clear of the floating WhatsApp button (bottom-left) */
}

/* ============================================================
   LANDING PAGE (lp-) — blue brand, variables only
   ============================================================ */
.lp-wrap{ max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---- Hero ---- */
.lp-hero{
  background: linear-gradient(135deg, var(--royal), var(--navy));
  color: var(--white); overflow: hidden; position: relative;
}
.lp-hero-inner{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
  padding: 72px 20px 84px;
}
.lp-chip{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); color: var(--white);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  margin-bottom: 20px;
}
.lp-chip i{ color: var(--cyan); }
.lp-hero-title{
  font-family: "Unbounded", sans-serif; font-weight: 800;
  font-size: 46px; line-height: 1.08; margin: 0 0 18px; color: var(--white); letter-spacing: -1px;
}
.lp-hero-title span{ color: var(--cyan); }
.lp-hero-sub{ font-size: 17px; line-height: 1.6; color: var(--pale); max-width: 520px; margin: 0 0 28px; }
.lp-hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; }
.lp-hero-stats{ display: flex; gap: 34px; margin-top: 40px; }
.lp-hero-stats > div{ display: flex; flex-direction: column; }
.lp-hero-stats b{ font-family: "Unbounded", sans-serif; font-size: 26px; color: var(--white); }
.lp-hero-stats span{ font-size: 13px; color: var(--pale); opacity: .85; }

/* Hero art (floating cards) */
.lp-hero-art{ position: relative; height: 340px; }
.lp-art-card{
  position: absolute; background: var(--white); color: var(--ink);
  border-radius: 18px; padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  font-weight: 700; box-shadow: 0 20px 45px rgba(6,22,58,.28); font-family: "Unbounded", sans-serif; font-size: 15px;
}
.lp-art-card i{ font-size: 26px; color: var(--royal); }
.lp-art-1{ top: 30px; left: 20px; }
.lp-art-2{ top: 130px; right: 20px; }
.lp-art-2 i{ color: var(--ink); }
.lp-art-3{ bottom: 20px; left: 60px; }
.lp-art-3 i{ color: #5CA646; }
.lp-art-glow{
  position: absolute; inset: 40px; border-radius: 50%;
  background: radial-gradient(circle, var(--sky), transparent 65%); opacity: .35; z-index: -1;
}

/* ---- Buttons (landing) ---- */
.lp-btn{
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  padding: 13px 24px; border-radius: var(--radius-btn); font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: .15s;
}
.lp-btn-sm{ padding: 9px 16px; font-size: 14px; }
.lp-btn-primary{ background: var(--royal); color: var(--white); border-color: var(--royal); }
.lp-btn-primary:hover{ background: var(--blue); border-color: var(--blue); color: var(--white); }
.lp-btn-ghost{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.lp-btn-ghost:hover{ border-color: var(--white); color: var(--white); }
.lp-section .lp-btn-ghost{ color: var(--ink); border-color: var(--line); }
.lp-section .lp-btn-ghost:hover{ border-color: var(--royal); color: var(--royal); }
.lp-btn-cta{ background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.lp-btn-cta:hover{ background: var(--sky); border-color: var(--sky); color: var(--ink); }

/* ---- Trust strip ---- */
.lp-trust{ background: var(--white); border-bottom: 1px solid var(--line); }
.lp-trust-inner{ display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; gap: 20px; flex-wrap: wrap; }
.lp-trust-inner > span{ color: var(--mut); font-size: 14px; font-weight: 600; }
.lp-trust-logos{ display: flex; gap: 30px; align-items: center; }
.lp-trust-logos i{ font-size: 28px; color: var(--mut); opacity: .7; transition: .15s; }
.lp-trust-logos i:hover{ color: var(--royal); opacity: 1; }

/* ---- Sections ---- */
.lp-section{ padding: 72px 0; background: var(--paper); }
.lp-section-alt{ background: var(--white); }
.lp-head{ text-align: center; max-width: 640px; margin: 0 auto 44px; }
.lp-h2{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 34px; color: var(--ink); margin: 0 0 12px; letter-spacing: -.5px; }
.lp-head-sub{ color: var(--mut); font-size: 16px; margin: 0; }
.lp-head-cta{ text-align: center; margin-top: 36px; }
.lp-empty{ text-align: center; color: var(--mut); }

/* ---- Cards grid ---- */
.lp-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Service showcase card */
.lp-service-card{ display: block; padding: 28px; text-decoration: none; transition: .18s; }
.lp-service-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px rgba(6,22,58,.10); border-color: var(--pale); }
.lp-ico{
  width: 58px; height: 58px; border-radius: 16px; background: var(--ice);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.lp-ico i{ font-size: 26px; color: var(--royal); }
.lp-service-card h3{ font-family: "Unbounded", sans-serif; font-size: 19px; color: var(--ink); margin: 0 0 10px; }
.lp-service-card p{ color: var(--mut); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.lp-card-link{ color: var(--royal); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }

/* ---- Steps ---- */
.lp-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-step{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 32px 26px; position: relative; }
.lp-section-alt .lp-step{ background: var(--paper); }
.lp-step-no{
  position: absolute; top: 22px; right: 24px; font-family: "Unbounded", sans-serif;
  font-size: 40px; font-weight: 800; color: var(--ice); line-height: 1;
}
.lp-step-ico{ font-size: 28px; color: var(--royal); margin-bottom: 16px; }
.lp-step h4{ font-family: "Unbounded", sans-serif; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.lp-step p{ color: var(--mut); font-size: 14px; line-height: 1.6; margin: 0; }

/* ---- Features ---- */
.lp-features{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lp-feature{ text-align: center; padding: 10px; }
.lp-feature i{
  width: 60px; height: 60px; border-radius: 50%; background: var(--ice); color: var(--royal);
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px;
}
.lp-feature h4{ font-family: "Unbounded", sans-serif; font-size: 16px; color: var(--ink); margin: 0 0 8px; }
.lp-feature p{ color: var(--mut); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---- Pricing teaser cards ---- */
.lp-price-card{ overflow: hidden; padding: 0; transition: .18s; }
.lp-price-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px rgba(6,22,58,.10); border-color: var(--pale); }
.lp-price-img{
  height: 180px; background: var(--ice); overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.lp-price-img img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.lp-price-body{ padding: 20px 22px 22px; }
.lp-cat-tag{
  display: inline-block; background: var(--ice); color: var(--royal);
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.lp-price-body h3{ font-family: "Unbounded", sans-serif; font-size: 17px; color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
.lp-badge{ font-size: 12px; font-weight: 600; color: var(--mut); background: var(--paper); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.lp-badge-sub{ color: var(--royal); border-color: var(--pale); background: var(--ice); }
.lp-price-meta{ margin-bottom: 14px; }
.lp-price-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-price{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); }
.lp-price-card{ text-decoration: none; }
.lp-price-link{ color: var(--royal); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lp-price-card:hover .lp-price-link i{ transform: translateX(3px); transition: transform .15s; }
.lp-price-card h3{ transition: color .15s; }
.lp-price-card:hover h3{ color: var(--royal); }

/* ---- CTA band ---- */
.lp-cta-band{ background: var(--ink); padding: 68px 0; }
.lp-cta-inner{ text-align: center; }
.lp-cta-band h2{ font-family: "Unbounded", sans-serif; font-size: 36px; color: var(--white); margin: 0 0 14px; letter-spacing: -.5px; }
.lp-cta-band h2 .hl{ color: var(--cyan); }
.lp-cta-band p{ color: var(--pale); font-size: 17px; margin: 0 0 28px; }

/* ---- Responsive ---- */
@media (max-width: 960px){
  .lp-hero-inner{ grid-template-columns: 1fr; padding: 56px 20px 64px; }
  .lp-hero-art{ display: none; }
  .lp-hero-title{ font-size: 38px; }
  .lp-cards, .lp-steps{ grid-template-columns: repeat(2, 1fr); }
  .lp-features{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .lp-hero-title{ font-size: 31px; }
  .lp-hero-stats{ gap: 22px; }
  .lp-cards, .lp-steps, .lp-features{ grid-template-columns: 1fr; }
  .lp-h2{ font-size: 27px; }
  .lp-section{ padding: 52px 0; }
}

/* ============================================================
   SERVICES LISTING
   ============================================================ */
/* banner: brand gradient with a soft grid and two slowly drifting glows */
.svc-banner{
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--royal), var(--navy));
  color: var(--white); padding: 50px 0 48px; text-align: center;
}
.svc-banner::before{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 85% at 50% 35%, #000 20%, transparent 75%);
}
.svc-banner-fx i{ position: absolute; z-index: -1; display: block; border-radius: 50%; pointer-events: none; }
.svc-banner-fx i:first-child{ width: 520px; height: 520px; left: -170px; top: -300px; background: radial-gradient(circle, rgba(77,163,255,.45), transparent 62%); animation: svcDrift 14s ease-in-out infinite alternate; }
.svc-banner-fx i:last-child{ width: 460px; height: 460px; right: -150px; bottom: -330px; background: radial-gradient(circle, rgba(191,219,254,.28), transparent 62%); animation: svcDrift 18s ease-in-out infinite alternate-reverse; }
@keyframes svcDrift{ to{ transform: translate(60px, 40px) scale(1.1); } }
.svc-banner-ico{
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin: 0 0 14px; border-radius: 17px;
  font-size: 24px; color: var(--white); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 30px -14px rgba(6,22,58,.6);
}
.svc-banner h1{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 38px; color: var(--white); margin: 0 0 10px; letter-spacing: -.02em; }
.svc-banner p{ color: var(--pale); font-size: 16px; line-height: 1.6; max-width: 620px; margin: 0 auto; }
.svc-banner-facts{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.svc-banner-facts span{
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
}
.svc-banner-facts i{ font-size: 12px; color: var(--pale); }
.svc-crumb.light{ margin-bottom: 20px; justify-content: center; }
.svc-crumb.light a{ color: var(--pale); }
.svc-crumb.light a:hover{ color: var(--white); }
.svc-crumb.light i{ color: var(--pale); }
.svc-crumb.light span{ color: var(--white); }

/* shared bits (also used on the detail page) */
.svc-cat-tag{
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--ice); color: var(--royal);
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; margin-bottom: 10px; text-decoration: none;
}
a.svc-cat-tag:hover, a.svc-cat-tag:focus{ color: var(--blue); text-decoration: none; }
.svc-type-badge{
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--royal); background: var(--white); border: 1px solid var(--line);
}
.svc-type-badge.sub{ color: var(--white) !important; background: var(--royal); border-color: var(--royal); }   /* !important: the global muted-text rule also targets ".sub" */
.svc-type-badge i{ color: inherit !important; }
.svc-noimg{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--pale); font-size: 34px; }
.svc-empty{ text-align: center; padding: 56px 20px; color: var(--mut); }
.svc-empty i{ font-size: 32px; color: var(--pale); margin-bottom: 12px; }
.svc-empty p{ margin: 0; }

/* ---- Plan cards ---- */
.svc-list-sec{ padding-top: 56px; }
.svc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-plan{
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .3s;
}
/* light that follows the pointer along the border (desktop) */
.svc-plan::before{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(30,79,216,.75), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.svc-plan:hover{ transform: translateY(-6px); border-color: var(--pale); box-shadow: 0 30px 60px -30px rgba(10,42,107,.42); }
.svc-plan:hover::before{ opacity: 1; }
.svc-js .svc-plan:not(.in){ opacity: 0; }
.svc-plan.in{ animation: svcUp .8s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i, 0) * .07s); }
@keyframes svcUp{ from{ opacity: 0; transform: translateY(28px); } }

.svc-plan-media{
  position: relative; display: flex; align-items: center; justify-content: center; height: 190px; padding: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--white), var(--ice) 72%); border-bottom: 1px solid var(--line);
}
.svc-plan-media img{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.svc-plan:hover .svc-plan-media img{ transform: scale(1.06); }
.svc-plan-media > i{ font-size: 40px; color: var(--pale); }
.svc-plan-type{
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--royal); background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 8px 18px -12px rgba(6,22,58,.45);
}
.svc-plan-type.sub{ color: var(--white) !important; background: var(--ink); border-color: var(--ink); }
.svc-plan-type i{ color: inherit !important; font-size: 11px; }
.svc-plan-body{ display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.svc-plan-name{ font-family: "Unbounded", sans-serif; font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.svc-plan-name a{ color: var(--ink); text-decoration: none; }
.svc-plan-name a::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }   /* whole card clickable */
.svc-plan:hover .svc-plan-name a{ color: var(--royal); }
.svc-plan-desc{
  color: var(--mut); font-size: 14px; line-height: 1.6; margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-plan-price{
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px;
  margin: auto 0 16px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.svc-plan-price .amt{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.svc-plan-price .per{ font-size: 12.5px; font-weight: 600; color: var(--mut); }
.svc-plan-btn{ position: relative; z-index: 2; width: 100%; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.svc-plan-btn i{ transition: transform .35s cubic-bezier(.16,1,.3,1); }
.svc-plan:hover .svc-plan-btn i{ transform: translateX(4px); }

/* ============================================================
   SERVICE DETAIL
   ============================================================ */
.svc-detail{ padding: 36px 0 72px; background: var(--paper); }
.svc-crumb{ display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mut); margin-bottom: 26px; flex-wrap: wrap; }
.svc-crumb a{ color: var(--mut); text-decoration: none; }
.svc-crumb a:hover{ color: var(--royal); }
.svc-crumb i{ font-size: 11px; opacity: .6; }
.svc-crumb span{ color: var(--ink); font-weight: 600; }

/* two columns: media + details on the left, a sticky order card on the right */
.svc-pd{ padding-top: 30px; }
.svc-pd-grid{ display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 32px; align-items: start; }
.svc-pd-main{ display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.svc-pd-side{ position: sticky; top: calc(var(--pub-nav-h, 72px) + 20px); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.svc-rise{ animation: svcUp .9s cubic-bezier(.16,1,.3,1) var(--d, 0s) backwards; }

/* every block on this page is the same card: white, same border, radius and soft shadow */
.svc-pd-media, .svc-pd-trust, .svc-pd-card, .svc-pd-buy{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 22px 46px -36px rgba(10,42,107,.45);
}
.svc-pd-media{
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 360px; padding: 28px;
}
.svc-pd-media img{
  display: block; max-width: 100%; max-height: 420px; object-fit: contain; border-radius: 16px;
  box-shadow: 0 24px 48px -30px rgba(10,42,107,.45); transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.svc-pd-media:hover img{ transform: scale(1.03); }
.svc-pd-noimg{ display: grid; place-items: center; width: 120px; height: 120px; border-radius: 30px; background: var(--white); border: 1px solid var(--line); color: var(--royal); font-size: 46px; }

/* trust points: one card, three parts split by thin lines */
.svc-pd-trust{ display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; }
.svc-pd-trust span{
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.svc-pd-trust span + span{ border-left: 1px solid var(--line); }
.svc-pd-trust i{ flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ice); color: var(--royal); font-size: 14px; }

.svc-pd-card{ padding: 26px 28px; }
.svc-pd-card h3{ display: flex; align-items: center; gap: 10px; font-family: "Unbounded", sans-serif; font-size: 17px; color: var(--ink); margin: 0 0 14px; }
.svc-pd-card h3 i{ color: var(--royal); font-size: 16px; }
.svc-desc-body{ color: var(--mut); font-size: 15px; line-height: 1.75; }
.svc-desc-body img{ max-width: 100%; height: auto; border-radius: 10px; }
.svc-desc-body p:last-child{ margin-bottom: 0; }

.svc-pd-buy{ position: relative; padding: 28px; }
.svc-detail-title{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 28px; color: var(--ink); margin: 6px 0 14px; line-height: 1.2; letter-spacing: -.02em; }
.svc-pd-price{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 20px 0;
  padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line);
}
.svc-price-lg{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.02em; color: var(--royal); line-height: 1.1; }
.svc-price-per{ color: var(--mut); font-size: 14.5px; font-weight: 600; }
.svc-order-btn{ width: 100%; padding: 15px; font-size: 16px; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; }
.svc-order-note{ color: var(--mut); font-size: 13px; margin: 12px 0 0; display: flex; align-items: center; gap: 8px; }
.svc-order-note i{ color: var(--royal); }
.svc-pd-steps{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.svc-pd-steps li{ display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.svc-pd-steps b{ flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ice); color: var(--royal); font-size: 12.5px; font-weight: 800; }
.svc-pd-steps strong{ color: var(--ink); font-weight: 700; }

.svc-related{ margin-top: 56px; border-top: 1px solid var(--line); padding-top: 32px; }
.svc-related-title{ font-family: "Unbounded", sans-serif; font-size: 18px; color: var(--ink); margin: 0 0 18px; font-weight: 700; }

/* Compact related cards (like the uploads gallery — small, 2-up on mobile) */
.svc-rel-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-rel-card{
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; min-width: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .4s;
}
.svc-rel-card:hover{ transform: translateY(-3px); border-color: var(--royal); box-shadow: 0 14px 30px -18px rgba(10,42,107,.4); text-decoration: none; }
.svc-rel-go{ margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--pale); transition: transform .35s cubic-bezier(.16,1,.3,1), color .25s; }
.svc-rel-card:hover .svc-rel-go{ color: var(--royal); transform: translateX(3px); }
.svc-rel-thumb{
  width: 48px; height: 48px; border-radius: 10px; background: var(--ice); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.svc-rel-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.svc-rel-thumb i{ color: var(--royal); font-size: 16px; }
.svc-rel-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-rel-name{
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-rel-card:hover .svc-rel-name{ color: var(--royal); }
.svc-rel-price{ font-size: 12.5px; color: var(--royal); font-weight: 600; }
.svc-rel-price small{ color: var(--mut); font-weight: 500; }

@media (max-width: 760px){ .svc-rel-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   ORDER PAGE
   ============================================================ */
.ord-h1{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 28px; color: var(--ink); margin: 6px 0 26px; letter-spacing: -.5px; }
.ord-grid{ display: grid; grid-template-columns: 1.4fr .9fr; gap: 32px; align-items: start; }

.ord-alert{
  display: flex; gap: 12px; align-items: flex-start;
  background: #FFF4E5; border: 1px solid #FFD8A8; color: #8a5a00;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 20px; font-size: 14px; line-height: 1.5;
}
.ord-alert i{ font-size: 18px; margin-top: 1px; }

.ord-form{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; }
.ord-field{ margin-bottom: 20px; }
.ord-field label{ display: block; font-weight: 700; color: var(--ink); font-size: 14px; margin-bottom: 8px; }
.ord-req-star{ color: #e03131; }
.ord-field textarea, .ord-field input,
.ord-collapse-body textarea{
  width: 100%; display: block; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--ink); background: var(--paper); resize: vertical;
}
.ord-field textarea:focus, .ord-field input:focus,
.ord-collapse-body textarea:focus{ outline: none; border-color: var(--royal); background: var(--white); box-shadow: 0 0 0 3px rgba(30,79,216,.1); }
.ord-field small, .ord-collapse-body small{ display: block; color: var(--mut); font-size: 12.5px; margin-top: 7px; }
/* Collapsible requirements */
.ord-collapse{ margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.ord-collapse-btn{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper); border: none; cursor: pointer; padding: 14px 16px;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); text-align: left;
}
.ord-collapse-btn i:first-child{ color: var(--royal); margin-right: 6px; }
.ord-collapse-btn small{ color: var(--mut); font-weight: 500; }
.ord-collapse-btn:focus{ outline: none; }
.ord-collapse-caret{ color: var(--mut); font-size: 13px; transition: transform .15s; }
.ord-collapse.open .ord-collapse-caret{ transform: rotate(180deg); }
.ord-collapse-body{ display: none; padding: 16px; border-top: 1px solid var(--line); }
.ord-collapse.open .ord-collapse-body{ display: block; }

.ord-submit{ width: 100%; padding: 15px; font-size: 16px; }
.ord-note{ color: var(--mut); font-size: 13px; margin: 12px 0 0; display: flex; align-items: center; gap: 8px; justify-content: center; }
.ord-note i{ color: var(--royal); }
.ord-note-warn{ color: #b8860b; }
.ord-note-warn i{ color: #b8860b; }

/* Wallet balance — shown separately from the order receipt */
.ord-wallet{
  display: flex; align-items: center; gap: 14px;
  background: var(--ice); border: 1px solid var(--pale); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 16px;
}
.ord-wallet-ico{
  width: 44px; height: 44px; border-radius: 12px; background: var(--royal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.ord-wallet-info{ display: flex; flex-direction: column; gap: 2px; }
.ord-wallet-label{ font-size: 12.5px; color: var(--mut); font-weight: 600; }
.ord-wallet-amt{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); line-height: 1.1; }
.ord-wallet.low{ background: #FDECEC; border-color: #F5C2C2; }
.ord-wallet.low .ord-wallet-ico{ background: #e03131; }
.ord-wallet.low .ord-wallet-amt{ color: #c92a2a; }

/* Summary */
.ord-sum-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; position: sticky; top: 88px; }
.ord-sum-card h3{ font-family: "Unbounded", sans-serif; font-size: 16px; color: var(--ink); margin: 0 0 18px; }
.ord-sum-service{ display: flex; gap: 12px; align-items: center; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.ord-sum-thumb{ width: 50px; height: 50px; border-radius: 12px; background: var(--ice); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.ord-sum-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ord-sum-thumb i{ color: var(--royal); font-size: 18px; }
.ord-sum-name{ display: block; font-family: "Unbounded", sans-serif; font-size: 14px; color: var(--ink); line-height: 1.3; }
.ord-sum-cat{ display: block; font-size: 12.5px; color: var(--mut); margin-top: 3px; }
.ord-sum-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--mut); }
.ord-sum-row .strong{ color: var(--ink); font-weight: 700; }
.ord-sum-row .ok{ color: #2b8a3e; font-weight: 700; }
.ord-sum-row .low{ color: #e03131; font-weight: 700; }
.ord-sum-total{ display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.ord-sum-total span:first-child{ font-weight: 700; color: var(--ink); }
.ord-sum-total span:last-child{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 22px; color: var(--royal); }

/* Success */
.ord-success{ max-width: 560px; margin: 20px auto; text-align: center; }
.ord-success-ico{ width: 76px; height: 76px; border-radius: 50%; background: #E6F7EC; color: #2b8a3e; display: inline-flex; align-items: center; justify-content: center; font-size: 36px; margin-bottom: 18px; }
.ord-success h1{ font-family: "Unbounded", sans-serif; font-size: 26px; color: var(--ink); margin: 0 0 12px; }
.ord-success > p{ color: var(--mut); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.ord-success-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px 24px; text-align: left; margin-bottom: 24px; }
.ord-success-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ord-badge{ font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ord-badge.lg{ font-size: 13px; padding: 6px 14px; }
.ord-badge.pending{ background: #FFF4E5; color: #b8860b; }
.ord-badge.active{ background: var(--ice); color: var(--royal); }
.ord-badge.completed{ background: #E6F7EC; color: #2b8a3e; }
.ord-badge.cancelled{ background: #FDECEC; color: #e03131; }

/* ============================================================
   MY ORDERS (list + detail)
   ============================================================ */
.ord-list-head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.ord-list-head h1{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 28px; color: var(--ink); margin: 0; letter-spacing: -.5px; }

.ord-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ord-tab{
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink);
  padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 14px;
}
.ord-tab:hover{ border-color: var(--royal); color: var(--royal); }
.ord-tab.active{ background: var(--royal); border-color: var(--royal); color: var(--white); }
.ord-tab-count{ background: var(--ice); color: var(--royal); font-size: 12px; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.ord-tab.active .ord-tab-count{ background: rgba(255,255,255,.22); color: var(--white); }

.ord-items{ display: flex; flex-direction: column; gap: 12px; }
.ord-item{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 20px; text-decoration: none; transition: .15s;
}
.ord-item:hover{ border-color: var(--pale); box-shadow: 0 12px 26px rgba(6,22,58,.07); }
.ord-item-main{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.ord-item-id{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 14px; color: var(--mut); flex-shrink: 0; }
.ord-item-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ord-item-name{ font-weight: 700; color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-item:hover .ord-item-name{ color: var(--royal); }
.ord-item-sub{ font-size: 12.5px; color: var(--mut); }
.ord-item-end{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ord-item-amt{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.ord-item-caret{ color: var(--pale); font-size: 14px; }

.ord-empty{ text-align: center; padding: 56px 20px; }
.ord-empty i{ font-size: 40px; color: var(--pale); margin-bottom: 14px; }
.ord-empty h3{ font-family: "Unbounded", sans-serif; font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.ord-empty p{ color: var(--mut); margin: 0 0 20px; }

/* Order detail */
.ord-detail-top{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.ord-detail-top h1{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); margin: 0 0 6px; }
.ord-detail-date{ color: var(--mut); font-size: 14px; margin: 0; }
.ord-detail-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ord-detail-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px 24px; }
.ord-detail-card h3{ font-family: "Unbounded", sans-serif; font-size: 15px; color: var(--ink); margin: 0 0 14px; }
.ord-req{ color: var(--ink); font-size: 14.5px; line-height: 1.6; margin: 0; white-space: pre-line; }
/* admin's note on the order (update, or the cancel reason) */
.ord-note{ display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; margin: 0 0 20px; padding: 16px 18px; border-radius: 16px; background: var(--ice); border: 1px solid var(--pale); }
.ord-note > i{ flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--royal); color: var(--white); font-size: 15px; }
.ord-note b{ display: block; margin-bottom: 4px; font-family: "Unbounded", sans-serif; font-size: 14.5px; color: var(--ink); }
.ord-note p{ margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.ord-req.muted{ color: var(--mut); }
.ord-detail-foot{ margin-top: 24px; }

@media (max-width: 760px){
  .ord-detail-grid{ grid-template-columns: 1fr; }
  .ord-item{ flex-direction: column; align-items: stretch; gap: 12px; }
  .ord-item-end{ justify-content: space-between; }
  .ord-item-caret{ display: none; }
  .ord-item-name{ white-space: normal; }
}

/* ============================================================
   SIDEBAR DROPDOWN (client area: Browse Services -> categories)
   Uses the app-shell --usb- variables for consistency.
   ============================================================ */
.usb-dd{ display: block; }
.usb-dd-toggle{ width: 100%; background: none; border: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.usb-dd-toggle:focus{ outline: none; box-shadow: none; }
.usb-dd-toggle:focus-visible{ outline: 2px solid var(--pale); outline-offset: -2px; }
.usb-dd-caret{ margin-left: auto; font-size: 11px; color: var(--usb-muted); transition: transform .15s; }
.usb-dd.open .usb-dd-caret{ transform: rotate(180deg); }
.usb-dd-menu{ display: none; margin: 2px 0 4px; }
.usb-dd.open .usb-dd-menu{ display: block; }
.usb-dd-link{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 42px; border-radius: 9px;
  color: var(--usb-ink2); text-decoration: none; font-size: 13px; font-weight: 600;
}
.usb-dd-link i{ width: 16px; text-align: center; font-size: 13px; color: var(--usb-muted); }
.usb-dd-link:hover{ background: var(--usb-hover); color: var(--usb-primary); }
.usb-dd-link:hover i{ color: var(--usb-primary); }
.usb-dd-link.active{ background: var(--usb-proc-bg); color: var(--usb-primary); font-weight: 700; }
.usb-dd-link.active i{ color: var(--usb-primary); }

/* ============================================================
   SHOP (client area — simple, no effects)
   ============================================================ */
.sh-wrap{ max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }
.sh-head{ margin-bottom: 20px; }
.sh-head h1{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); margin: 0 0 6px; letter-spacing: -.3px; }
.sh-head p{ color: var(--mut); font-size: 14px; margin: 0; }
.sh-head p a{ color: var(--royal); font-weight: 600; text-decoration: none; }

.sh-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.sh-card{ background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; }
.sh-card-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sh-thumb{ width: 40px; height: 40px; border-radius: 10px; background: var(--ice); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.sh-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sh-thumb i{ color: var(--royal); font-size: 15px; }
.sh-cat{ background: var(--ice); color: var(--royal); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.sh-name{ font-family: "Unbounded", sans-serif; font-size: 15px; margin: 0 0 8px; line-height: 1.35; }
.sh-name a{ color: var(--ink); text-decoration: none; }
.sh-name a:hover{ color: var(--royal); }
.sh-type{ font-size: 12.5px; color: var(--mut); display: inline-flex; align-items: center; gap: 6px; }
.sh-type i{ color: var(--royal); font-size: 11px; }
.sh-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.sh-price{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); }
.sh-btn{ background: var(--royal); color: var(--white); border: none; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 13.5px; text-decoration: none; display: inline-block; }
.sh-btn:hover{ background: var(--blue); color: var(--white); }
.sh-btn.lg{ display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 15px; border-radius: 12px; }
.sh-details{ display: block; text-align: center; color: var(--mut); font-size: 12.5px; text-decoration: none; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.sh-details:hover{ color: var(--royal); }
.sh-empty{ text-align: center; padding: 48px 20px; color: var(--mut); }
.sh-empty i{ font-size: 34px; color: var(--pale); margin-bottom: 12px; display: block; }

/* Shop detail (card-based, clean) */
.shd-wrap{ max-width: 680px; }
.sh-crumb{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 13.5px; }
.sh-crumb a{ color: var(--mut); text-decoration: none; font-weight: 600; }
.sh-crumb a:hover{ color: var(--royal); }
.sh-crumb i{ color: var(--pale); font-size: 11px; }
.sh-crumb span{ color: var(--ink); font-weight: 600; }

.shd-card{ background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 16px; }

.shd-media{
  background: var(--ice); display: flex; align-items: center; justify-content: center;
  padding: 18px; min-height: 180px;
}
.shd-media img{ max-width: 100%; max-height: 260px; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.shd-noimg{ color: var(--pale); font-size: 48px; }

.shd-body{ padding: 22px 24px 24px; }
.shd-title{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 23px; color: var(--ink); margin: 10px 0 14px; line-height: 1.25; letter-spacing: -.3px; }

.shd-type-badge{
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: 1px solid var(--line); color: var(--mut);
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.shd-type-badge i{ color: var(--royal); }
.shd-type-badge.sub{ background: var(--ice); color: var(--royal); border-color: var(--pale); }

.shd-price-row{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.shd-price-box{ display: flex; flex-direction: column; gap: 2px; }
.shd-price-label{ font-size: 12px; color: var(--mut); font-weight: 600; }
.shd-price{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); line-height: 1; }
.shd-price-row .sh-btn.lg{ flex-shrink: 0; }

.sh-pay-note{ color: var(--mut); font-size: 12.5px; margin: 14px 0 0; display: flex; align-items: center; gap: 7px; }
.sh-pay-note i{ color: var(--royal); }

.shd-text-card{ padding: 22px 24px; }
.shd-card-h{ font-family: "Unbounded", sans-serif; font-size: 16px; color: var(--ink); margin: 0 0 14px; display: flex; align-items: center; gap: 9px; }
.shd-card-h i{ color: var(--royal); font-size: 15px; }
.sh-desc-body{ color: var(--mut); font-size: 14.5px; line-height: 1.7; }
.sh-desc-body img{ max-width: 100%; height: auto; border-radius: 8px; }

/* Shop related (compact) */
.sh-related{ margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.sh-related h2{ font-family: "Unbounded", sans-serif; font-size: 17px; color: var(--ink); margin: 0 0 16px; }
.sh-rel-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sh-rel{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; min-width: 0; }
.sh-rel:hover{ border-color: var(--royal); }
.sh-rel-thumb{ width: 42px; height: 42px; border-radius: 9px; background: var(--ice); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.sh-rel-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sh-rel-thumb i{ color: var(--royal); }
.sh-rel-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-rel-name{ font-weight: 700; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-rel:hover .sh-rel-name{ color: var(--royal); }
.sh-rel-price{ color: var(--royal); font-weight: 600; font-size: 12.5px; }

@media (max-width: 600px){
  .sh-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 440px){
  .shd-price-row{ flex-direction: column; align-items: stretch; gap: 14px; }
  .shd-price-row .sh-btn.lg{ justify-content: center; }
}

/* ============================================================
   CONTACT (public)
   ============================================================ */
.ct-sec{ padding-top: 56px; }
.ct-grid{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.ct-side{ display: flex; flex-direction: column; gap: 14px; }
.ct-card, .ct-form-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 22px 46px -36px rgba(10,42,107,.45);
}
.ct-card{
  display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .4s;
}
.ct-card:hover, .ct-card:focus{ transform: translateY(-3px); border-color: var(--pale); box-shadow: 0 26px 50px -30px rgba(10,42,107,.45); text-decoration: none; }
.ct-ico{ flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ice); color: var(--royal); font-size: 20px; }
.ct-wa .ct-ico{ background: var(--royal); color: var(--white); font-size: 22px; }
.ct-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-txt b{ font-family: "Unbounded", sans-serif; font-size: 15.5px; color: var(--ink); }
.ct-txt span{ font-size: 14.5px; font-weight: 600; color: var(--royal); word-break: break-word; }
.ct-txt small{ font-size: 12.5px; color: var(--mut) !important; }
.ct-go{ margin-left: auto; flex-shrink: 0; color: var(--pale); transition: transform .35s cubic-bezier(.16,1,.3,1), color .25s; }
.ct-card:hover .ct-go{ color: var(--royal); transform: translateX(3px); }

.ct-form-card{ padding: 28px; }
.ct-form-card h2{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 6px; }
.ct-form-sub{ margin: 0 0 18px; font-size: 14.5px; color: var(--mut); }
.ct-form{ display: flex; flex-direction: column; gap: 14px; }
.ct-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field{ display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ct-field > span{ font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ct-field em{ font-style: normal; font-weight: 500; color: var(--mut); }
.ct-field input, .ct-field textarea{
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  font-family: "Manrope", sans-serif; font-size: 15px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ct-field input:focus, .ct-field textarea:focus{ outline: none; border-color: var(--royal); background: var(--white); box-shadow: 0 0 0 3px rgba(30,79,216,.12); }
.ct-field textarea{ resize: vertical; min-height: 130px; }
.ct-send{ align-self: flex-start; display: inline-flex !important; align-items: center; gap: 10px; }
.ct-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-alert{ display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; }
.ct-alert.ok{ background: var(--ice); color: var(--royal); border: 1px solid var(--pale); }
.ct-alert.err{ background: #FFF4F4; color: #B42318; border: 1px solid #F8D3D0; }
@media (max-width: 860px){ .ct-grid{ grid-template-columns: 1fr; } }
@media (max-width: 560px){
  .ct-sec{ padding-top: 36px; }
  .ct-row{ grid-template-columns: 1fr; }
  .ct-form-card{ padding: 22px; }
  .ct-send{ align-self: stretch; justify-content: center; }
}

/* ============================================================
   ADD FUNDS (client area) — payment methods as tiles, not a dropdown
   ============================================================ */
.af-head{ margin-bottom: 16px; }
.af-title{ font-family: "Unbounded", sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.af-sub{ margin: 0; font-size: 14px; color: var(--mut); }
.af-methods{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.af-method{
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 14px 40px 14px 14px;
  text-align: left; cursor: pointer; font-family: "Manrope", sans-serif;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 16px;
  transition: border-color .2s, background-color .2s, box-shadow .25s, transform .25s;
}
.af-method:hover{ border-color: var(--pale); box-shadow: 0 12px 26px -18px rgba(10,42,107,.45); transform: translateY(-1px); }
.af-method:focus{ outline: none; }
.af-method:focus-visible{ outline: 2px solid var(--sky); outline-offset: 2px; }
.af-method.active{ border-color: var(--royal); background: var(--ice); box-shadow: 0 12px 26px -18px rgba(30,79,216,.6); }
.af-method-ico{
  flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--ice); color: var(--royal); font-size: 18px; transition: background-color .2s, color .2s;
}
.af-method.active .af-method-ico{ background: var(--royal); color: var(--white); }
.af-method-txt{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.af-method-txt b{ font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.af-method-txt span{ font-size: 12.5px; color: var(--mut); }
.af-method-tick{ position: absolute; top: 12px; right: 12px; font-size: 16px; color: var(--royal); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s; }
.af-method.active .af-method-tick{ opacity: 1; transform: none; }
.af-form{ margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.af-empty{
  display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 14px;
  background: var(--paper); border: 1px dashed var(--line); color: var(--mut); font-size: 14px;
}
.af-empty i{ color: var(--royal); }
@media (max-width: 560px){ .af-methods{ grid-template-columns: 1fr; } }

/* ============================================================
   DASHBOARD (client area)
   ============================================================ */
.dash{ max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
.dash-head{ margin-bottom: 20px; }
.dash-head h1{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); margin: 0 0 6px; letter-spacing: -.3px; }
.dash-head p{ color: var(--mut); font-size: 14.5px; margin: 0; }

/* Balance card */
.dash-balance{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
  background: linear-gradient(135deg, var(--royal), var(--navy)); color: var(--white);
  border-radius: 18px; padding: 24px 26px; margin-bottom: 18px;
  box-shadow: 0 14px 30px rgba(30,79,216,.25);
}
.dash-balance-label{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pale); margin-bottom: 8px; }
.dash-balance-amt{ display: block; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--white); }
.dash-balance-side{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-balance-spent{ text-align: right; }
.dash-balance-spent span{ display: block; font-size: 12px; color: var(--pale); opacity: .85; }
.dash-balance-spent b{ font-family: "Unbounded", sans-serif; font-size: 18px; color: var(--white); }
.dash-balance-btn{
  display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--royal);
  font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 12px; text-decoration: none;
}
.dash-balance-btn:hover{ background: var(--cyan); color: var(--ink); }

/* Stats */
.dash-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.dash-stat{ display: flex; align-items: center; gap: 13px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; padding: 16px 18px; }
.dash-stat-ico{ width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.dash-stat-ico.all{ background: var(--ice); color: var(--royal); }
.dash-stat-ico.pending{ background: #FFF4E5; color: #b8860b; }
.dash-stat-ico.active{ background: var(--ice); color: var(--royal); }
.dash-stat-ico.completed{ background: #E6F7EC; color: #2b8a3e; }
.dash-stat-info{ display: flex; flex-direction: column; }
.dash-stat-info b{ font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); line-height: 1; }
.dash-stat-info small{ font-size: 12.5px; color: var(--mut); margin-top: 4px; }

/* Card (recent orders) */
.dash-card{ background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin-bottom: 18px; }
.dash-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dash-card-head h3{ font-family: "Unbounded", sans-serif; font-size: 16px; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 9px; }
.dash-card-head h3 i{ color: var(--royal); font-size: 14px; }
.dash-link{ color: var(--royal); font-weight: 700; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.dash-orders{ display: flex; flex-direction: column; }
.dash-order{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 4px; text-decoration: none; border-bottom: 1px solid var(--line); }
.dash-order:last-child{ border-bottom: none; }
.dash-order-main{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-order-name{ font-weight: 700; color: var(--ink); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-order:hover .dash-order-name{ color: var(--royal); }
.dash-order-sub{ font-size: 12.5px; color: var(--mut); }
.dash-order-end{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dash-order-amt{ font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }

.dash-empty{ text-align: center; padding: 30px 16px; }
.dash-empty i{ font-size: 32px; color: var(--pale); margin-bottom: 12px; display: block; }
.dash-empty p{ color: var(--mut); margin: 0 0 16px; font-size: 14px; }

/* Quick actions */
.dash-actions{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-action{ display: flex; align-items: center; gap: 13px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; padding: 18px; text-decoration: none; transition: .15s; }
.dash-action:hover{ border-color: var(--pale); box-shadow: 0 12px 26px rgba(6,22,58,.07); }
.dash-action-ico{ width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--ice); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.dash-action-txt{ flex: 1; min-width: 0; }
.dash-action-txt b{ display: block; font-size: 15px; color: var(--ink); }
.dash-action-txt small{ display: block; font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.dash-action-caret{ color: var(--pale); font-size: 13px; }
.dash-action:hover .dash-action-caret{ color: var(--royal); }

@media (max-width: 760px){
  .dash-stats{ grid-template-columns: repeat(2, 1fr); }
  .dash-actions{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .dash-balance{ flex-direction: column; align-items: stretch; }
  .dash-balance-side{ justify-content: space-between; }
  .dash-balance-amt{ font-size: 30px; }
}

@media (max-width: 860px){
  .ord-grid{ grid-template-columns: 1fr; gap: 22px; }
  .ord-summary{ order: -1; }
  .ord-sum-card{ position: static; }
}

@media (max-width: 960px){
  .svc-grid{ grid-template-columns: repeat(2, 1fr); }
  /* one column: image, order card, then the details straight away, steps, trust */
  .svc-pd-grid{ display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .svc-pd-main, .svc-pd-side{ display: contents; }
  .svc-pd-media{ order: 1; min-height: 260px; }
  .svc-pd-buy{ order: 2; }
  .svc-pd-about{ order: 3; }
  .svc-pd-how{ order: 4; }
  .svc-pd-trust{ order: 5; }
}
@media (max-width: 560px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-banner{ padding: 38px 0 40px; }
  .svc-banner h1{ font-size: 28px; }
  .svc-banner-ico{ width: 50px; height: 50px; font-size: 21px; border-radius: 15px; }
  .svc-list-sec{ padding-top: 36px; }
  .svc-plan-media{ height: 170px; }
  .svc-detail-title{ font-size: 24px; }
  .svc-pd-media{ min-height: 220px; padding: 22px; }
  .svc-pd-buy{ padding: 22px; }
  .svc-pd-card{ padding: 22px; }
  .svc-pd-trust{ grid-template-columns: 1fr; padding: 4px 6px; }
  .svc-pd-trust span + span{ border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce){
  .svc-banner-fx i, .svc-rise, .svc-plan.in{ animation: none !important; }
}