/* =========================================================
   Real IT — Embossed Tech Surface
   Design layer: tactile relief, not glassmorphism.
   Raised surfaces = interactive / primary content.
   Inset surfaces  = inputs / supporting content.
   ========================================================= */

:root{
  --relief-bg:#edf2f8;
  --relief-surface:#edf2f8;
  --relief-hi:#ffffff;
  --relief-lo:#cbd5e2;
  --relief-lo-soft:rgba(116,137,165,.28);
  --relief-ink:#111c44;
  --relief-muted:#6f7da3;
  --relief-raised:-10px -10px 24px rgba(255,255,255,.92), 10px 10px 24px rgba(116,137,165,.20);
  --relief-raised-sm:-5px -5px 12px rgba(255,255,255,.92), 5px 5px 12px rgba(116,137,165,.18);
  --relief-raised-hover:-13px -13px 28px rgba(255,255,255,.96), 13px 13px 28px rgba(93,119,154,.23);
  --relief-inset:inset 5px 5px 11px rgba(116,137,165,.19), inset -5px -5px 11px rgba(255,255,255,.92);
  --relief-inset-deep:inset 8px 8px 18px rgba(102,124,154,.22), inset -8px -8px 18px rgba(255,255,255,.92);
  --relief-edge:inset 1px 1px 0 rgba(255,255,255,.86), inset -1px -1px 0 rgba(91,111,139,.08);
  --relief-radius:24px;
}

:root[data-theme="dark"]{
  --relief-bg:#17191d;
  --relief-surface:#17191d;
  --relief-hi:#24272d;
  --relief-lo:#090a0c;
  --relief-lo-soft:rgba(0,0,0,.44);
  --relief-ink:#f5f7fa;
  --relief-muted:#a6afbf;
  --relief-raised:-8px -8px 20px rgba(44,48,56,.48), 9px 9px 22px rgba(0,0,0,.48);
  --relief-raised-sm:-4px -4px 10px rgba(44,48,56,.44), 5px 5px 11px rgba(0,0,0,.44);
  --relief-raised-hover:-11px -11px 24px rgba(48,52,60,.52), 12px 12px 25px rgba(0,0,0,.54);
  --relief-inset:inset 5px 5px 11px rgba(0,0,0,.45), inset -5px -5px 11px rgba(45,49,57,.33);
  --relief-inset-deep:inset 8px 8px 17px rgba(0,0,0,.50), inset -8px -8px 17px rgba(45,49,57,.30);
  --relief-edge:inset 1px 1px 0 rgba(255,255,255,.035), inset -1px -1px 0 rgba(0,0,0,.35);
}

/* ---------- Shared material ---------- */
.public-body,
.workspace-body,
.auth-form-panel,
.login-shell{
  background:var(--relief-bg);
}

.public-site,
.public-page,
.main{
  background:var(--relief-bg);
}

/* No glass anywhere in the main workspace shell. */
.topbar{
  background:var(--relief-bg)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* ---------- Public navigation ---------- */
.public-nav{
  margin-top:14px;
  padding:10px 14px 10px 18px;
  height:72px;
  border-radius:24px;
  background:var(--relief-bg);
  box-shadow:var(--relief-raised-sm),var(--relief-edge);
}

.public-links a,
.public-hq-link{
  color:var(--relief-muted);
}

.public-links a:hover,
.public-hq-link:hover{
  color:var(--brand-blue);
}

.public-login,
.hero-actions .btn-primary,
.public-cta .btn-primary{
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 12px 24px rgba(34,147,255,.20), inset 1px 1px 0 rgba(255,255,255,.27), inset -1px -1px 0 rgba(12,98,181,.18);
}

.hero-actions .btn-soft,
.btn-soft,
.btn-light{
  border:0;
  background:var(--relief-bg);
  box-shadow:var(--relief-raised-sm),var(--relief-edge);
}

.hero-actions .btn-soft:hover,
.btn-soft:hover,
.btn-light:hover{
  box-shadow:var(--relief-raised-hover),var(--relief-edge);
}

/* ---------- Public hero: one continuous embossed surface ---------- */
.public-hero{
  min-height:700px;
  background:var(--relief-bg);
}

.hero-orb{display:none}

.hero-copy h1,
.section-heading h2,
.public-page-hero h1,
.story-card h3,
.service-detail-grid h3,
.case-card h2,
.contact-grid h2{
  color:var(--relief-ink);
}

.hero-copy>p,
.section-heading>p,
.service-card p,
.product-showcase-card p,
.public-page-hero p,
.story-card p,
.service-detail-grid p,
.case-card p,
.contact-grid>div>p{
  color:var(--relief-muted);
}

.hero-trust>div{
  position:relative;
  min-width:112px;
  padding:12px 14px;
  border-radius:15px;
  background:var(--relief-bg);
  box-shadow:var(--relief-inset);
}

.hero-trust strong{color:var(--relief-ink)}
.hero-trust span{color:var(--relief-muted)}

.hero-visual{min-height:500px}

.brand-showcase{
  background:var(--relief-bg);
  border-radius:44px;
  box-shadow:var(--relief-raised),var(--relief-edge);
  border:0;
}

.brand-showcase::before{
  inset:14px;
  width:auto;
  height:auto;
  border-radius:34px;
  background:transparent;
  opacity:1;
  filter:none;
  box-shadow:var(--relief-inset-deep);
  pointer-events:none;
}

.brand-showcase-glow{display:none}

.brand-showcase img{
  width:76%;
  filter:drop-shadow(0 8px 11px rgba(70,92,121,.14));
}

.brand-showcase-copy{
  color:var(--relief-ink);
  text-shadow:1px 1px 0 rgba(255,255,255,.72);
}

.brand-showcase-copy span{color:var(--relief-muted);opacity:1}

/* Small raised badges, not translucent floating cards. */
.float-card{
  background:var(--relief-bg);
  border:0;
  box-shadow:var(--relief-raised-sm),var(--relief-edge);
  border-radius:17px;
}

.float-icon,
.service-icon{
  background:var(--relief-bg);
  box-shadow:var(--relief-inset);
  color:var(--brand-blue);
}

.float-card small{color:var(--relief-muted)}
.float-card strong{color:var(--relief-ink)}

/* ---------- Sections ---------- */
.public-section,
.public-page-hero{
  background:var(--relief-bg);
}

.public-section-soft,
.products-section{
  background:var(--relief-bg);
}

.service-grid,
.public-products,
.story-grid,
.personality-grid,
.service-detail-grid,
.case-grid{
  gap:24px;
}

/* Content is visually embossed into the page instead of boxed with borders. */
.service-card,
.product-showcase-card,
.story-card,
.personality-grid>div,
.service-detail-grid article,
.case-card,
.public-contact-form{
  border:0;
  background:var(--relief-bg);
  box-shadow:var(--relief-raised),var(--relief-edge);
}

.service-card,
.product-showcase-card,
.story-card,
.service-detail-grid article,
.case-card{
  position:relative;
  overflow:hidden;
}

.service-card::after,
.story-card::after,
.service-detail-grid article:not(.selected-service)::after,
.case-card::after{
  content:'';
  position:absolute;
  inset:10px;
  border-radius:calc(var(--relief-radius) - 7px);
  pointer-events:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.72), inset -1px -1px 0 rgba(91,111,139,.06);
}

.service-card:hover,
.product-showcase-card:hover,
.story-card:hover,
.case-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--relief-raised-hover),var(--relief-edge);
}

.service-card h3,
.product-showcase-card h3,
.personality-grid strong{
  color:var(--relief-ink);
}

.personality-grid span{color:var(--relief-muted)}

.product-showcase-card::after{
  width:180px;
  height:180px;
  right:-90px;
  top:-90px;
  background:transparent;
  opacity:1;
  box-shadow:var(--relief-inset-deep);
}

.product-pill,
.case-tags span,
.career-path span{
  background:var(--relief-bg);
  border:0;
  box-shadow:var(--relief-inset);
}

/* Preserve a deliberate dark engraved plaque for contrast. */
.about-panel,
.career-card,
.service-detail-grid .selected-service,
.public-cta{
  background:#101722;
  border:0;
  box-shadow:-10px -10px 24px rgba(255,255,255,.88), 13px 13px 28px rgba(95,116,145,.24), inset 1px 1px 0 rgba(255,255,255,.07), inset -1px -1px 0 rgba(0,0,0,.38);
}

.about-brand{
  background:#101722;
  border:0;
  box-shadow:inset 8px 8px 18px rgba(0,0,0,.48), inset -8px -8px 18px rgba(255,255,255,.035);
}

.public-cta{
  width:min(1180px,calc(100% - 48px));
  margin:40px auto 80px;
  border-radius:32px;
}

.public-footer{
  background:var(--relief-bg);
  border-top:0;
}

/* ---------- Forms: deliberately inset ---------- */
.public-contact-form input,
.public-contact-form select,
.public-contact-form textarea,
.field input,
.field select,
.field textarea,
.workspace-search,
.local-search,
.search-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
select,
textarea{
  background:var(--relief-bg);
  border:0;
  box-shadow:var(--relief-inset);
}

.public-contact-form input:focus,
.public-contact-form select:focus,
.public-contact-form textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus{
  outline:2px solid rgba(34,147,255,.18);
  outline-offset:2px;
}

/* ---------- HQ / Client Portal ---------- */
.workspace-body{
  --bg:var(--relief-bg);
  --surface:var(--relief-bg);
  --surface-2:#e7edf5;
  --surface-3:#e0e8f1;
  --line:rgba(103,124,151,.10);
  --shadow:var(--relief-raised-sm);
  --shadow-lg:var(--relief-raised);
}

:root[data-theme="dark"] .workspace-body{
  --bg:var(--relief-bg);
  --surface:var(--relief-bg);
  --surface-2:#1d2025;
  --surface-3:#22262c;
  --line:rgba(255,255,255,.055);
}

.sidebar{
  background:var(--relief-bg);
  box-shadow:8px 0 24px rgba(97,116,143,.15), inset -1px 0 0 rgba(103,124,151,.05);
}

.sidebar-divider{background:transparent;box-shadow:0 1px 0 rgba(255,255,255,.74),0 -1px 0 rgba(105,126,153,.09)}

.side-link{
  margin:2px 14px;
  padding-left:17px;
  padding-right:17px;
  border-radius:14px;
}

.side-link:hover{
  background:var(--relief-bg);
  box-shadow:var(--relief-raised-sm);
}

.side-link.active{
  background:var(--relief-bg);
  box-shadow:var(--relief-inset);
}

.side-link.active::after{display:none}

.sidebar-brand-card,
.module-badge,
.top-tools,
.profile-menu,
.search-results,
.portal-client-chip{
  background:var(--relief-bg);
  border:0;
  box-shadow:var(--relief-raised-sm),var(--relief-edge);
}

.card,
.stat-card,
.table-card,
.content-card,
.dashboard-card,
.metric-card,
.analytics-card,
.approval-card,
.meeting-card,
.financial-rule-card,
.goal-row,
.decision-row,
.department-card,
.workspace-product-card,
.client-profile-card,
.company-summary-card,
.library-card,
.document-row,
.login-shell>.login-card,
.login-shell .login-card{
  background:var(--relief-bg);
  border-color:transparent!important;
  box-shadow:var(--relief-raised),var(--relief-edge);
}

.stat-card:hover{
  box-shadow:var(--relief-raised-hover),var(--relief-edge);
}

.icon-button,
.profile-trigger,
.sidebar-brand-card-mark,
.stat-icon{
  background:var(--relief-bg);
  box-shadow:var(--relief-raised-sm);
}

.icon-button:active,
.profile-trigger:active{
  box-shadow:var(--relief-inset);
}

/* Tables should feel engraved into a larger module, not like nested cards. */
.table-wrap,
.table-scroll,
.data-table-wrap{
  border:0!important;
  background:var(--relief-bg);
  box-shadow:var(--relief-inset);
  border-radius:18px;
}

table thead th{
  background:transparent!important;
}

table tbody tr{
  border-color:rgba(103,124,151,.09)!important;
}

/* ---------- Auth ---------- */
.auth-form-panel{background:var(--relief-bg)}
.login-card,
.setup-card{
  padding:30px;
  border-radius:28px;
  background:var(--relief-bg);
  box-shadow:var(--relief-raised),var(--relief-edge);
}

/* ---------- Motion & accessibility ---------- */
.service-card,
.product-showcase-card,
.story-card,
.case-card,
.stat-card,
.btn-soft,
.btn-light,
.icon-button,
.side-link{
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}

@media (prefers-reduced-motion:reduce){
  .service-card,.product-showcase-card,.story-card,.case-card,.stat-card,.btn,.side-link{transition:none!important}
}

@media(max-width:860px){
  .public-nav{
    margin-top:8px;
    width:calc(100% - 24px);
    padding-left:10px;
    padding-right:10px;
  }
  .public-cta{width:calc(100% - 34px);margin-bottom:55px}
  .service-grid,.public-products,.story-grid,.service-detail-grid,.case-grid{gap:18px}
}

@media(max-width:620px){
  .public-nav{border-radius:18px}
  .brand-showcase{border-radius:30px}
  .brand-showcase::before{border-radius:23px}
  .service-card,.product-showcase-card,.story-card,.service-detail-grid article,.case-card,.public-contact-form{box-shadow:-7px -7px 17px rgba(255,255,255,.9),7px 7px 18px rgba(116,137,165,.18),var(--relief-edge)}
  .hero-trust>div{min-width:96px}
}

/* =========================================================
   Real IT — Public site refinement v2
   Direction: #101010 near-black, premium embossed digital surface,
   less gaming-dashboard, more breathing room and cleaner hierarchy.
   ========================================================= */

.public-body{
  background:#101010;
  color:#f5f7fb;
}

.public-site{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:linear-gradient(180deg,#101010 0%,#0e1014 52%,#0b0d11 100%);
}

.public-site::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 10%, rgba(34,147,255,.12), transparent 0 22%),
    radial-gradient(circle at 84% 14%, rgba(134,220,136,.08), transparent 0 18%),
    radial-gradient(circle at 54% 66%, rgba(73,175,208,.06), transparent 0 26%),
    linear-gradient(180deg,#101010 0%,#0e1014 52%,#0b0d11 100%);
}

.public-site::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.24;
  background-image:radial-gradient(rgba(255,255,255,.07) .6px, transparent .6px);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.07));
}

.public-body .brand-eyebrow,
.public-body .brand-eyebrow.light,
.public-body .kicker,
.public-body .card-kicker{
  color:#96a0b5;
}

.public-body .brand-eyebrow span,
.public-body .brand-eyebrow.light span{
  background:var(--brand-gradient);
}

.public-container{
  width:min(1200px,calc(100% - 48px));
}

.public-nav{
  width:min(1240px,calc(100% - 48px));
  margin-top:18px;
  padding:10px 14px 10px 18px;
  background:#111317;
  border-radius:26px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.04),
    inset -1px -1px 0 rgba(0,0,0,.46),
    -6px -6px 14px rgba(255,255,255,.018),
    12px 12px 30px rgba(0,0,0,.42);
}

.public-brand strong,
.footer-brand,
.footer-brand span,
.public-body .section-heading h2,
.public-body .public-page-hero h1,
.public-body .story-card h3,
.public-body .service-detail-grid h3,
.public-body .case-card h2,
.public-body .contact-grid h2,
.public-body .hero-copy h1,
.public-body .about-panel h2,
.public-body .product-showcase-card h3,
.public-body .service-card h3{
  color:#f7f9fc;
}

.public-brand small,
.public-links a,
.public-hq-link,
.footer-links a,
.public-body .hero-copy>p,
.public-body .section-heading>p,
.public-body .service-card p,
.public-body .product-showcase-card p,
.public-body .public-page-hero p,
.public-body .story-card p,
.public-body .service-detail-grid p,
.public-body .case-card p,
.public-body .contact-grid>div>p,
.public-body .public-cta p,
.public-body .contact-principles span{
  color:#9ca6ba;
}

.public-links a:hover,
.public-hq-link:hover,
.footer-links a:hover{
  color:#dce7ff;
}

.public-hq-link{
  font-weight:700;
}

.public-login,
.hero-actions .btn-primary,
.public-cta .btn-primary,
.public-contact-form .btn-primary{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(134,220,136,.98), rgba(73,175,208,.98) 55%, rgba(34,147,255,.98));
  color:#081019;
  box-shadow:
    0 8px 22px rgba(34,147,255,.20),
    inset 1px 1px 0 rgba(255,255,255,.35),
    inset -1px -1px 0 rgba(0,0,0,.18);
}

.public-login:hover,
.hero-actions .btn-primary:hover,
.public-cta .btn-primary:hover,
.public-contact-form .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 26px rgba(34,147,255,.24),
    inset 1px 1px 0 rgba(255,255,255,.38),
    inset -1px -1px 0 rgba(0,0,0,.20);
}

.hero-actions .btn-soft,
.btn-soft,
.btn-light{
  background:#111317;
  color:#eef3fb;
  border:0;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.40),
    -4px -4px 10px rgba(255,255,255,.012),
    8px 8px 18px rgba(0,0,0,.34);
}

.hero-actions .btn-soft:hover,
.btn-soft:hover,
.btn-light:hover{
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.04),
    inset -1px -1px 0 rgba(0,0,0,.44),
    -5px -5px 12px rgba(255,255,255,.014),
    10px 10px 20px rgba(0,0,0,.38);
}

.public-hero,
.public-page-hero,
.public-section,
.public-section-soft,
.products-section,
.public-footer{
  background:transparent;
}

.public-hero{
  min-height:760px;
}

.hero-grid{
  gap:64px;
  padding:92px 0 92px;
}

.hero-copy h1{
  max-width:740px;
  font-size:clamp(3.6rem,6vw,6.2rem);
  line-height:.92;
}

.hero-copy>p{
  max-width:620px;
}

.hero-trust{
  gap:16px;
  margin-top:36px;
}

.hero-trust>div{
  min-width:136px;
  padding:14px 16px;
  border-radius:16px;
  background:#121419;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.38),
    inset 6px 6px 14px rgba(0,0,0,.28),
    inset -4px -4px 12px rgba(255,255,255,.015);
}

.hero-trust strong{
  color:#f3f6fb;
}

.hero-trust span{
  color:#8f9bb0;
}

.hero-visual{
  min-height:530px;
}

.brand-showcase{
  width:min(100%, 520px);
  padding:50px;
  background:#121419;
  border-radius:42px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.46),
    -10px -10px 24px rgba(255,255,255,.012),
    18px 18px 38px rgba(0,0,0,.44);
}

.brand-showcase::before{
  inset:16px;
  border-radius:34px;
  box-shadow:
    inset 12px 12px 24px rgba(0,0,0,.44),
    inset -10px -10px 22px rgba(255,255,255,.018);
}

.brand-showcase img{
  width:78%;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.20));
}

.brand-showcase-copy{
  text-shadow:none;
}

.brand-showcase-copy span{
  color:#8b95aa;
}

.float-card{
  min-width:160px;
  padding:13px 15px;
  background:#121419;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.42),
    -6px -6px 14px rgba(255,255,255,.01),
    12px 12px 22px rgba(0,0,0,.34);
}

.float-icon,
.service-icon{
  background:#111317;
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.33),
    inset -4px -4px 12px rgba(255,255,255,.02);
  color:#59bdf1;
}

.float-card small{
  color:#7f89a0;
}

.float-card strong{
  color:#f2f6fb;
}

.public-section{
  padding:92px 0;
}

.section-heading{
  gap:52px;
  margin-bottom:34px;
}

.service-grid,
.public-products,
.story-grid,
.personality-grid,
.service-detail-grid,
.case-grid{
  gap:22px;
}

.service-card,
.product-showcase-card,
.story-card,
.personality-grid>div,
.service-detail-grid article,
.case-card,
.public-contact-form{
  background:#121419;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.06);
}

.service-card,
.story-card,
.service-detail-grid article,
.case-card,
.public-contact-form{
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.02),
    inset -1px -1px 0 rgba(0,0,0,.40),
    0 12px 30px rgba(0,0,0,.18);
}

.service-card::after,
.story-card::after,
.service-detail-grid article:not(.selected-service)::after,
.case-card::after{
  inset:0;
  border-radius:inherit;
  box-shadow:none;
}

.service-card:hover,
.product-showcase-card:hover,
.story-card:hover,
.case-card:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 18px 36px rgba(0,0,0,.24);
}

.product-showcase-card{
  position:relative;
  overflow:hidden;
  min-height:280px;
}

.product-showcase-card::after{
  right:-72px;
  top:-72px;
  width:150px;
  height:150px;
  background:radial-gradient(circle at center, rgba(34,147,255,.18), rgba(34,147,255,0) 70%);
  box-shadow:none;
}

.product-pill,
.case-tags span,
.career-path span{
  background:#0f1115;
  color:#c5d2e9;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.24),
    inset -4px -4px 12px rgba(255,255,255,.012);
}

.about-panel,
.career-card,
.service-detail-grid .selected-service,
.public-cta{
  background:linear-gradient(180deg,#13161c 0%,#101317 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.46),
    0 16px 40px rgba(0,0,0,.24);
}

.about-brand{
  background:#101317;
  box-shadow:
    inset 10px 10px 22px rgba(0,0,0,.40),
    inset -8px -8px 18px rgba(255,255,255,.015);
}

.public-cta{
  width:min(1180px,calc(100% - 48px));
  margin:28px auto 80px;
  border-radius:30px;
}

.public-footer{
  padding:24px 0 34px;
}

.public-footer .public-container{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:18px;
}

.public-contact-form input,
.public-contact-form select,
.public-contact-form textarea{
  background:#0f1115;
  color:#f5f7fb;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.28),
    inset -4px -4px 10px rgba(255,255,255,.012);
}

.public-contact-form label{
  color:#dbe5f6;
}

.public-contact-form input::placeholder,
.public-contact-form textarea::placeholder{
  color:#7d879d;
}

@media(max-width:1199px){
  .public-nav,
  .public-container,
  .public-cta{width:calc(100% - 32px)}
  .hero-grid{gap:38px;padding-top:76px}
}

@media(max-width:860px){
  .public-nav{margin-top:12px;border-radius:20px}
  .public-hero{min-height:auto}
  .hero-grid{padding:60px 0 74px}
  .public-section{padding:72px 0}
  .hero-trust>div{min-width:120px}
}

@media(max-width:620px){
  .public-container,
  .public-nav,
  .public-cta{width:calc(100% - 24px)}
  .public-nav{padding:10px 12px}
  .hero-copy h1{font-size:3.15rem}
  .brand-showcase{padding:34px;border-radius:30px}
  .brand-showcase::before{border-radius:22px}
}

/* =========================================================
   Real IT — Embossed logo refinement
   Makes the logo feel raised / 3D while preserving the brand mark.
   ========================================================= */

.public-brand,
.footer-brand,
.about-brand,
.brand-showcase,
.auth-brand-content,
.sidebar-brand-wrap .brand{
  position:relative;
}

.public-brand img,
.footer-brand img,
.auth-logo,
.about-brand img,
.sidebar-brand-wrap .brand img{
  position:relative;
  z-index:1;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.12))
    drop-shadow(0 2px 0 rgba(255,255,255,.05))
    drop-shadow(0 8px 12px rgba(0,0,0,.28));
}

.public-brand img,
.footer-brand img,
.auth-logo,
.sidebar-brand-wrap .brand img{
  padding:8px 10px;
  border-radius:16px;
  background:#111317;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.42),
    -4px -4px 10px rgba(255,255,255,.012),
    8px 8px 18px rgba(0,0,0,.34);
}

.public-brand img{
  width:84px;
  height:42px;
}

.footer-brand img{
  width:62px;
  height:30px;
}

.brand-showcase img{
  position:relative;
  z-index:2;
  filter:
    drop-shadow(-1px -1px 0 rgba(255,255,255,.16))
    drop-shadow(0 1px 0 rgba(255,255,255,.12))
    drop-shadow(0 8px 0 rgba(10,12,16,.28))
    drop-shadow(0 18px 22px rgba(0,0,0,.30));
  transform:translateY(-2px);
}

.brand-showcase::after{
  content:'';
  position:absolute;
  inset:28% 24% 24% 24%;
  z-index:1;
  border-radius:28px;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.04), rgba(255,255,255,0) 55%);
  box-shadow:
    inset 14px 14px 24px rgba(0,0,0,.42),
    inset -10px -10px 20px rgba(255,255,255,.018),
    0 16px 22px rgba(0,0,0,.10);
  pointer-events:none;
}

.about-brand img{
  width:78%;
  max-width:360px;
  filter:
    drop-shadow(-1px -1px 0 rgba(255,255,255,.14))
    drop-shadow(0 1px 0 rgba(255,255,255,.10))
    drop-shadow(0 8px 0 rgba(10,12,16,.24))
    drop-shadow(0 15px 18px rgba(0,0,0,.24));
  transform:translateY(-1px);
}

.auth-logo{
  width:min(180px,58%);
  height:auto;
}

@media(max-width:620px){
  .public-brand img,
  .footer-brand img,
  .auth-logo,
  .sidebar-brand-wrap .brand img{
    padding:6px 8px;
    border-radius:14px;
  }
  .brand-showcase::after{
    inset:30% 18% 22% 18%;
  }
}

/* =========================================================
   Real IT — Logo 3D correction
   The logo itself carries the depth. Remove plate-like wrappers.
   ========================================================= */

.public-brand img,
.footer-brand img,
.auth-logo,
.sidebar-brand-wrap .brand img,
.about-brand img{
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.public-brand img,
.footer-brand img,
.auth-logo,
.sidebar-brand-wrap .brand img,
.about-brand img,
.brand-showcase img{
  filter:
    drop-shadow(-1px -1px 0 rgba(255,255,255,.09))
    drop-shadow(0 10px 16px rgba(0,0,0,.22)) !important;
}

.brand-showcase{
  background:#121419;
}

.brand-showcase::after{
  inset:34% 26% 24% 26%;
  border-radius:22px;
  background:radial-gradient(circle at 45% 34%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  box-shadow:
    inset 8px 8px 16px rgba(0,0,0,.32),
    inset -6px -6px 14px rgba(255,255,255,.012);
}

.public-brand{
  gap:13px;
}

.footer-brand{
  gap:11px;
}

/* =========================================================
   Real IT — True layered hero logo extrusion v5
   Keeps physical depth visible after responsive scaling.
   ========================================================= */
.brand-logo-3d{
  position:relative;
  z-index:3;
  width:78%;
  aspect-ratio:2048 / 862;
  margin:0 auto;
  transform:translate(-5px,-5px);
  isolation:isolate;
}

.brand-logo-3d img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  pointer-events:none;
}

.brand-logo-3d .logo-depth{
  z-index:1;
  opacity:.98;
  filter:brightness(.24) saturate(1.55) contrast(1.08) !important;
}
.brand-logo-3d .depth-10{transform:translate(12px,12px)}
.brand-logo-3d .depth-9{transform:translate(11px,11px)}
.brand-logo-3d .depth-8{transform:translate(10px,10px)}
.brand-logo-3d .depth-7{transform:translate(9px,9px)}
.brand-logo-3d .depth-6{transform:translate(8px,8px)}
.brand-logo-3d .depth-5{transform:translate(7px,7px)}
.brand-logo-3d .depth-4{transform:translate(6px,6px)}
.brand-logo-3d .depth-3{transform:translate(5px,5px)}
.brand-logo-3d .depth-2{transform:translate(4px,4px)}
.brand-logo-3d .depth-1{transform:translate(3px,3px)}

.brand-logo-3d .logo-front{
  z-index:4;
  transform:translate(0,0);
  filter:
    drop-shadow(-1px -1px 0 rgba(255,255,255,.30))
    drop-shadow(-2px -2px 1px rgba(255,255,255,.08))
    drop-shadow(14px 18px 20px rgba(0,0,0,.44)) !important;
}

.brand-logo-3d::before{
  content:'';
  position:absolute;
  z-index:2;
  inset:18% 5% 6% 4%;
  transform:translate(13px,15px);
  background:rgba(0,0,0,.22);
  filter:blur(18px);
  border-radius:30%;
  pointer-events:none;
}

.brand-showcase::after{
  inset:25% 14% 28% 14%;
  border-radius:34px;
  background:transparent;
  box-shadow:
    inset 10px 10px 22px rgba(0,0,0,.34),
    inset -8px -8px 18px rgba(255,255,255,.012);
}

@media(max-width:860px){
  .brand-logo-3d{width:74%;transform:translate(-4px,-4px)}
  .brand-logo-3d .depth-10{transform:translate(9px,9px)}
  .brand-logo-3d .depth-9{transform:translate(8px,8px)}
  .brand-logo-3d .depth-8{transform:translate(8px,8px)}
  .brand-logo-3d .depth-7{transform:translate(7px,7px)}
  .brand-logo-3d .depth-6{transform:translate(7px,7px)}
  .brand-logo-3d .depth-5{transform:translate(6px,6px)}
  .brand-logo-3d .depth-4{transform:translate(6px,6px)}
  .brand-logo-3d .depth-3{transform:translate(5px,5px)}
  .brand-logo-3d .depth-2{transform:translate(4px,4px)}
  .brand-logo-3d .depth-1{transform:translate(3px,3px)}
}

@media(max-width:620px){
  .brand-logo-3d{width:76%;transform:translate(-3px,-3px)}
  .brand-logo-3d .logo-front{
    filter:
      drop-shadow(-1px -1px 0 rgba(255,255,255,.24))
      drop-shadow(9px 12px 15px rgba(0,0,0,.38)) !important;
  }
}

/* =========================================================
   Real IT — v6 use approved 3D logo asset
   Replace layered construction with the approved logo version
   and remove the heavy inner embossed cavity.
   ========================================================= */
.brand-showcase-logo-3d{
  position:relative;
  z-index:3;
  display:block;
  width:82%;
  height:auto;
  margin:0 auto;
  filter:
    drop-shadow(0 16px 24px rgba(0,0,0,.34))
    drop-shadow(-1px -1px 0 rgba(255,255,255,.10));
}

.brand-showcase::after{
  display:none;
}

.brand-showcase{
  padding-top:58px;
  padding-bottom:38px;
}

.about-brand img{
  width:82%;
  max-width:390px;
}

@media(max-width:860px){
  .brand-showcase-logo-3d{width:80%}
}

@media(max-width:620px){
  .brand-showcase-logo-3d{width:86%}
}

/* =========================================================
   Real IT — v7 hero typography correction
   Keep the headline as two deliberate lines and give Poppins
   enough line-box room so letters do not appear clipped.
   ========================================================= */
.hero-copy h1{
  max-width:none;
  margin:17px 0 23px;
  padding:.04em 0 .08em;
  font-size:clamp(3.45rem,5.1vw,4.85rem);
  line-height:1.03;
  letter-spacing:-.042em;
  overflow:visible;
}

.hero-copy h1 .hero-line{
  display:block;
  width:max-content;
  max-width:100%;
  padding:.025em .02em .075em 0;
  white-space:nowrap;
  line-height:1.03;
}

.hero-copy h1 .hero-line-light{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
}

.hero-copy h1 .hero-line-gradient{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

@media(max-width:860px){
  .hero-copy h1{
    font-size:clamp(3rem,8.4vw,4.2rem);
    line-height:1.04;
    letter-spacing:-.038em;
  }
}

@media(max-width:620px){
  .hero-copy h1{
    font-size:clamp(2.7rem,10.5vw,3.15rem);
    line-height:1.05;
    letter-spacing:-.035em;
    margin-bottom:20px;
  }
  .hero-copy h1 .hero-line{
    padding-bottom:.09em;
  }
}

@media(max-width:430px){
  .hero-copy h1{
    font-size:clamp(2.25rem,10.8vw,2.7rem);
  }
}

/* =========================================================
   Real IT — v8 official brand voice landing page
   70% human · 20% clever · 10% tech
   ========================================================= */

.hero-answer{
  display:inline-flex;
  align-items:center;
  margin:-6px 0 14px;
  font-family:'Poppins',sans-serif;
  font-size:clamp(1rem,1.35vw,1.25rem);
  font-weight:700;
  color:#cbd5e6;
  letter-spacing:-.02em;
}

.hero-answer::before{
  content:'';
  width:24px;
  height:2px;
  margin-right:10px;
  border-radius:999px;
  background:var(--brand-gradient);
}

.brand-principle-section{
  padding-top:54px;
  padding-bottom:70px;
}

.brand-principle-panel{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:52px;
  align-items:center;
  padding:46px;
  border-radius:34px;
  background:linear-gradient(145deg,#121419,#0f1115);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.45),
    0 20px 50px rgba(0,0,0,.22);
}

.brand-principle-copy h2{
  margin:14px 0 18px;
  font-size:clamp(2.25rem,4.2vw,4rem);
  line-height:1.02;
  color:#f7f9fc;
}

.brand-principle-copy h2 span{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-principle-copy p{
  max-width:610px;
  margin:0;
  color:#9ca6ba;
  font-size:13px;
  line-height:1.75;
}

.brand-principle-points{
  display:grid;
  gap:12px;
}

.brand-principle-points>div{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
  row-gap:3px;
  align-items:start;
  padding:18px 19px;
  border-radius:19px;
  background:#101216;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.24),
    inset -4px -4px 10px rgba(255,255,255,.012);
}

.principle-icon{
  grid-row:1 / span 2;
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#56bfe9;
  background:#12151a;
  box-shadow:
    inset 5px 5px 11px rgba(0,0,0,.30),
    inset -3px -3px 9px rgba(255,255,255,.012);
}

.principle-icon svg{width:17px;height:17px}
.brand-principle-points strong{color:#edf3fc;font-size:13px}
.brand-principle-points small{color:#8792a8;font-size:11px;line-height:1.5}

.products-heading{
  margin-bottom:30px;
}

.process-section{
  padding-top:78px;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.process-card{
  position:relative;
  overflow:hidden;
  min-height:245px;
  padding:28px;
  border-radius:24px;
  background:#121419;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.02),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 14px 32px rgba(0,0,0,.18);
}

.process-number{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:38px;
  border-radius:50%;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:800;
  color:#64c9d0;
  background:#101216;
  box-shadow:
    inset 6px 6px 13px rgba(0,0,0,.33),
    inset -4px -4px 11px rgba(255,255,255,.012);
}

.process-card h3{
  margin:0 0 10px;
  font-size:19px;
  color:#f5f8fd;
}

.process-card p{
  margin:0;
  color:#929db2;
  font-size:12px;
  line-height:1.7;
}

.process-card::after{
  content:'';
  position:absolute;
  width:145px;
  height:145px;
  right:-78px;
  top:-78px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,147,255,.10),transparent 68%);
  pointer-events:none;
}

.home-final-cta{
  text-align:left;
}

.home-final-cta .public-container{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    'eyebrow button'
    'heading button'
    'copy button';
  gap:4px 28px;
  align-items:center;
}

.home-final-cta .brand-eyebrow{grid-area:eyebrow}
.home-final-cta h2{grid-area:heading;margin-top:9px}
.home-final-cta p{grid-area:copy;margin:6px 0 0}
.home-final-cta .btn{grid-area:button;white-space:nowrap}

@media(max-width:900px){
  .brand-principle-panel{grid-template-columns:1fr;gap:30px;padding:36px}
  .process-grid{grid-template-columns:1fr}
  .process-card{min-height:auto}
  .process-number{margin-bottom:24px}
  .home-final-cta .public-container{
    grid-template-columns:1fr;
    grid-template-areas:'eyebrow' 'heading' 'copy' 'button';
  }
  .home-final-cta .btn{margin-top:18px;width:max-content}
}

@media(max-width:620px){
  .hero-answer{margin-top:-2px}
  .brand-principle-section{padding-top:30px}
  .brand-principle-panel{padding:28px 22px;border-radius:25px}
  .brand-principle-copy h2{font-size:2.35rem}
  .brand-principle-points>div{padding:16px}
  .process-card{padding:24px 22px}
  .home-final-cta .btn{width:100%;justify-content:center}
}

/* =========================================================
   Real IT — v10 footer brand-shape refinement
   Official white: #fdfeff
   Footer top silhouette borrows from the Real IT logo geometry.
   ========================================================= */
:root{
  --realit-white:#fdfeff;
}

.public-body{
  color:var(--realit-white);
}

.public-brand strong,
.footer-brand,
.footer-brand span,
.public-body .section-heading h2,
.public-body .public-page-hero h1,
.public-body .story-card h3,
.public-body .service-detail-grid h3,
.public-body .case-card h2,
.public-body .contact-grid h2,
.public-body .hero-copy h1,
.public-body .about-panel h2,
.public-body .product-showcase-card h3,
.public-body .service-card h3,
.public-body .public-cta h2,
.public-body .brand-principle-copy h2,
.public-body .process-card h3{
  color:var(--realit-white);
}

.public-footer{
  padding:42px 0 34px;
  border-top:0;
  background:transparent;
}

.footer-shell{
  position:relative;
  overflow:hidden;
  padding:118px 34px 30px;
  background:linear-gradient(180deg,#111317 0%, #0e1014 100%);
  border:1px solid rgba(253,254,255,.055);
  border-radius:34px 34px 28px 28px;
  clip-path:polygon(0 12%, 21% 12%, 39% 3%, 46% 3%, 46% 0, 54% 0, 54% 3%, 61% 3%, 79% 12%, 100% 12%, 100% 100%, 0 100%);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 18px 36px rgba(0,0,0,.22);
}

.footer-shell::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 16%, rgba(134,220,136,.08), transparent 0 20%),
    radial-gradient(circle at 78% 14%, rgba(34,147,255,.09), transparent 0 22%),
    linear-gradient(90deg, rgba(134,220,136,.05), rgba(73,175,208,.04), rgba(34,147,255,.05));
  pointer-events:none;
}

.footer-mark-outline{
  position:absolute;
  left:50%;
  top:20px;
  width:min(540px,76%);
  height:74px;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.9;
}

.footer-mark-segment{
  position:absolute;
  top:0;
  background:linear-gradient(180deg, rgba(253,254,255,.03), rgba(253,254,255,.008));
  border:1px solid rgba(253,254,255,.08);
  box-shadow:inset 1px 1px 0 rgba(253,254,255,.04), inset -1px -1px 0 rgba(0,0,0,.38);
}

.footer-mark-left{
  left:0;
  width:40%;
  height:64px;
  clip-path:polygon(0 100%, 0 84%, 100% 18%, 100% 35%, 11% 100%);
  border-image:linear-gradient(90deg, rgba(134,220,136,.55), rgba(73,175,208,.34)) 1;
}

.footer-mark-mid{
  left:43.5%;
  width:13%;
  height:74px;
  clip-path:polygon(16% 100%, 16% 10%, 50% 0, 84% 10%, 84% 100%);
  border-image:linear-gradient(180deg, rgba(73,175,208,.52), rgba(34,147,255,.40)) 1;
}

.footer-mark-right{
  right:0;
  width:40%;
  height:64px;
  clip-path:polygon(0 18%, 100% 84%, 100% 100%, 89% 100%, 0 35%);
  border-image:linear-gradient(90deg, rgba(73,175,208,.34), rgba(34,147,255,.58)) 1;
}

.footer-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.2fr .95fr .85fr;
  gap:26px;
  align-items:end;
}

.footer-brand-block p,
.footer-meta span{
  margin:12px 0 0;
  color:#a8b2c6;
  font-size:12px;
  line-height:1.7;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--realit-white);
}

.footer-brand img{
  width:56px;
  height:26px;
  object-fit:contain;
}

.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px 18px;
  flex-wrap:wrap;
}

.footer-links a{
  text-decoration:none;
  color:#b5bfd2;
  font-size:11px;
  font-weight:600;
}

.footer-links a:hover{
  color:var(--realit-white);
}

.footer-meta{
  text-align:right;
}

.footer-tag{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  color:#dfe9f8;
  background:#0e1014;
  border:1px solid rgba(253,254,255,.06);
  box-shadow:inset 6px 6px 14px rgba(0,0,0,.28), inset -4px -4px 10px rgba(255,255,255,.01);
}

@media(max-width:980px){
  .footer-shell{
    padding:104px 28px 26px;
    clip-path:polygon(0 10%, 19% 10%, 38% 3%, 45% 3%, 45% 0, 55% 0, 55% 3%, 62% 3%, 81% 10%, 100% 10%, 100% 100%, 0 100%);
  }
  .footer-grid{grid-template-columns:1fr;gap:18px;align-items:start}
  .footer-links{justify-content:flex-start}
  .footer-meta{text-align:left}
}

@media(max-width:620px){
  .public-footer{padding:24px 0 28px}
  .footer-shell{
    padding:86px 20px 22px;
    border-radius:24px;
    clip-path:polygon(0 8%, 14% 8%, 33% 3%, 43% 3%, 43% 0, 57% 0, 57% 3%, 67% 3%, 86% 8%, 100% 8%, 100% 100%, 0 100%);
  }
  .footer-mark-outline{width:min(320px,84%);height:48px;top:18px}
  .footer-mark-left,.footer-mark-right{height:42px}
  .footer-mark-mid{height:48px}
  .footer-brand-block p,.footer-meta span{font-size:11px}
}

/* =========================================================
   Real IT — v11 footer top-outline correction
   User intent: keep footer body normal, use only the upper logo-inspired
   outline as the divider between body and footer.
   ========================================================= */

.public-footer{
  padding:22px 0 34px;
}

.footer-shell{
  overflow:visible;
  padding:74px 34px 30px;
  border-radius:30px;
  clip-path:none;
  background:linear-gradient(180deg,#111317 0%, #0e1014 100%);
}

.footer-shell::before{
  background:
    radial-gradient(circle at 22% 10%, rgba(134,220,136,.06), transparent 0 20%),
    radial-gradient(circle at 78% 10%, rgba(34,147,255,.07), transparent 0 22%),
    linear-gradient(180deg, rgba(255,255,255,.008), rgba(255,255,255,0));
}

.footer-mark-outline{
  position:absolute;
  left:50%;
  top:0;
  z-index:2;
  width:min(520px,78%);
  height:72px;
  transform:translate(-50%,-54%);
  pointer-events:none;
}

.footer-mark-segment{
  position:absolute;
  bottom:0;
  background:linear-gradient(180deg,#111317 0%, #101216 100%);
  border:1px solid rgba(253,254,255,.08);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.34),
    0 12px 22px rgba(0,0,0,.20);
}

.footer-mark-left{
  left:0;
  width:39%;
  height:58px;
  clip-path:polygon(0 100%, 0 80%, 100% 16%, 100% 35%, 10% 100%);
  border-image:linear-gradient(90deg, rgba(134,220,136,.55), rgba(73,175,208,.35)) 1;
}

.footer-mark-mid{
  left:43.7%;
  width:12.6%;
  height:72px;
  clip-path:polygon(18% 100%, 18% 12%, 50% 0, 82% 12%, 82% 100%);
  border-image:linear-gradient(180deg, rgba(73,175,208,.50), rgba(34,147,255,.42)) 1;
}

.footer-mark-right{
  right:0;
  width:39%;
  height:58px;
  clip-path:polygon(0 16%, 100% 80%, 100% 100%, 90% 100%, 0 35%);
  border-image:linear-gradient(90deg, rgba(73,175,208,.35), rgba(34,147,255,.58)) 1;
}

.footer-grid{
  position:relative;
  z-index:3;
}

@media(max-width:980px){
  .footer-shell{
    padding:70px 28px 26px;
  }
  .footer-mark-outline{
    width:min(440px,84%);
    height:64px;
    transform:translate(-50%,-50%);
  }
  .footer-mark-left,
  .footer-mark-right{
    height:50px;
  }
  .footer-mark-mid{
    height:64px;
  }
}

@media(max-width:620px){
  .public-footer{
    padding:14px 0 26px;
  }
  .footer-shell{
    padding:58px 20px 22px;
    border-radius:24px;
  }
  .footer-mark-outline{
    width:min(300px,86%);
    height:44px;
    transform:translate(-50%,-44%);
  }
  .footer-mark-left,
  .footer-mark-right{
    height:34px;
  }
  .footer-mark-mid{
    height:44px;
  }
}

/* =========================================================
   Real IT — v12 footer divider refinement
   Match user's sketch: simple top outline divider only.
   Footer body remains a normal panel; only the upper divider
   borrows the Real IT logo silhouette.
   ========================================================= */

.public-footer{
  padding:18px 0 34px;
}

.footer-shell{
  overflow:visible;
  padding:54px 34px 28px;
  border-radius:0 0 28px 28px;
  border-top:1px solid rgba(253,254,255,.04);
  background:linear-gradient(180deg,#0f1217 0%, #0d1014 100%);
  box-shadow:none;
}

.footer-shell::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)),
    radial-gradient(circle at 22% 18%, rgba(134,220,136,.04), transparent 0 20%),
    radial-gradient(circle at 78% 18%, rgba(34,147,255,.05), transparent 0 22%);
}

.footer-mark-outline{
  position:absolute;
  left:50%;
  top:0;
  width:min(660px,88%);
  height:42px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.96;
}

.footer-mark-segment,
.footer-mark-left,
.footer-mark-mid,
.footer-mark-right{
  position:absolute;
  background:var(--realit-white);
  border:0;
  box-shadow:0 0 0 1px rgba(253,254,255,.03), 0 0 12px rgba(253,254,255,.03);
}

.footer-mark-left{
  left:0;
  top:24px;
  width:39%;
  height:2px;
  transform:rotate(-7deg);
  transform-origin:left center;
}

.footer-mark-right{
  right:0;
  top:24px;
  width:39%;
  height:2px;
  transform:rotate(7deg);
  transform-origin:right center;
}

.footer-mark-mid{
  left:50%;
  top:16px;
  width:48px;
  height:12px;
  transform:translateX(-50%);
  background:transparent;
  box-shadow:none;
}

.footer-mark-mid::before,
.footer-mark-mid::after{
  content:'';
  position:absolute;
  top:0;
  width:27px;
  height:2px;
  background:var(--realit-white);
  box-shadow:0 0 0 1px rgba(253,254,255,.03), 0 0 12px rgba(253,254,255,.03);
}

.footer-mark-mid::before{
  left:0;
  transform:rotate(-12deg);
  transform-origin:left center;
}

.footer-mark-mid::after{
  right:0;
  transform:rotate(12deg);
  transform-origin:right center;
}

.footer-grid{
  grid-template-columns:1.15fr .95fr .9fr;
  align-items:end;
}

@media(max-width:980px){
  .footer-shell{
    padding:50px 28px 24px;
    border-radius:0 0 24px 24px;
  }
  .footer-mark-outline{
    width:min(560px,90%);
    height:36px;
  }
  .footer-mark-left,
  .footer-mark-right{top:20px;width:37%}
  .footer-mark-mid{top:13px}
}

@media(max-width:620px){
  .public-footer{padding:12px 0 24px}
  .footer-shell{
    padding:42px 20px 20px;
    border-radius:0 0 20px 20px;
  }
  .footer-mark-outline{
    width:min(320px,92%);
    height:26px;
    transform:translate(-50%,-42%);
  }
  .footer-mark-left,
  .footer-mark-right{
    top:15px;
    width:34%;
  }
  .footer-mark-mid{
    width:34px;
    height:9px;
    top:10px;
  }
  .footer-mark-mid::before,
  .footer-mark-mid::after{
    width:19px;
  }
}

/* =========================================================
   Real IT — v14 professional minimalist footer
   Clean footer matching the branding/UI. No redundant CTA,
   no shaped divider experiment.
   ========================================================= */

.public-footer{
  padding:22px 0 34px;
  background:transparent;
}

.footer-shell-minimal{
  position:relative;
  overflow:hidden;
  padding:28px 34px 20px;
  border-radius:28px;
  border:1px solid rgba(253,254,255,.05);
  background:linear-gradient(180deg,#111317 0%, #0e1014 100%);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 18px 38px rgba(0,0,0,.20);
}

.footer-shell-minimal::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg, rgba(134,220,136,.88), rgba(73,175,208,.88), rgba(34,147,255,.88));
  opacity:.9;
}

.footer-shell-minimal::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 22%, rgba(134,220,136,.06), transparent 0 16%),
    radial-gradient(circle at 86% 16%, rgba(34,147,255,.06), transparent 0 18%);
  pointer-events:none;
}

.footer-watermark{
  position:absolute;
  right:-42px;
  bottom:-34px;
  width:min(340px,42%);
  opacity:.05;
  pointer-events:none;
  z-index:0;
}

.footer-watermark img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

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

.footer-main{
  display:grid;
  grid-template-columns:1.25fr .95fr .7fr;
  gap:28px;
  align-items:start;
}

.footer-brand-block p{
  margin:12px 0 0;
  max-width:420px;
  color:#a8b2c6;
  font-size:12px;
  line-height:1.7;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand img{
  width:56px;
  height:26px;
  object-fit:contain;
}

.footer-brand span{
  color:var(--realit-white);
}

.footer-nav,
.footer-access{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-content:flex-start;
}

.footer-nav a,
.footer-access a{
  color:#bcc6d8;
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  transition:color .2s ease, opacity .2s ease;
}

.footer-nav a:hover,
.footer-access a:hover{
  color:var(--realit-white);
}

.footer-access{
  justify-content:flex-end;
}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(253,254,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.footer-bottom > span:first-child{
  color:#95a1b7;
  font-size:10px;
}

.footer-bottom-note{
  color:#dbe7f8;
  font-size:10px;
}

@media(max-width:980px){
  .footer-shell-minimal{
    padding:26px 28px 18px;
  }
  .footer-main{
    grid-template-columns:1fr;
    gap:18px;
  }
  .footer-access{
    justify-content:flex-start;
  }
  .footer-watermark{
    width:min(280px,52%);
    right:-38px;
    bottom:-26px;
  }
}

@media(max-width:620px){
  .public-footer{padding:14px 0 24px}
  .footer-shell-minimal{
    padding:22px 20px 16px;
    border-radius:22px;
  }
  .footer-nav,
  .footer-access{
    gap:10px 14px;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-watermark{
    width:180px;
    right:-22px;
    bottom:-12px;
  }
}

/* =========================================================
   Real IT — v15 embossed footer refinement
   Keep the professional-minimal layout, but make the footer
   visually belong to the embossed surface system.
   ========================================================= */

.footer-shell-minimal{
  border:1px solid rgba(253,254,255,.045);
  background:linear-gradient(180deg,#121419 0%, #101216 100%);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.46),
    -8px -8px 18px rgba(255,255,255,.01),
    18px 18px 36px rgba(0,0,0,.30);
}

.footer-shell-minimal::before{
  height:1px;
  opacity:.8;
}

.footer-brand-block,
.footer-nav,
.footer-access{
  position:relative;
  z-index:1;
  padding:18px 20px;
  border-radius:20px;
  background:#111317;
  border:1px solid rgba(253,254,255,.035);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.02),
    inset -1px -1px 0 rgba(0,0,0,.38),
    inset 7px 7px 16px rgba(0,0,0,.18),
    inset -5px -5px 12px rgba(255,255,255,.008);
}

.footer-brand{
  margin-bottom:2px;
}

.footer-brand img{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.20));
}

.footer-nav,
.footer-access{
  gap:10px 12px;
  align-items:flex-start;
}

.footer-nav a,
.footer-access a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  color:#c5cedf;
  background:#101216;
  border:1px solid rgba(253,254,255,.035);
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.22),
    inset -3px -3px 8px rgba(255,255,255,.008);
}

.footer-nav a:hover,
.footer-access a:hover{
  color:var(--realit-white);
  background:#11141a;
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.02),
    inset -1px -1px 0 rgba(0,0,0,.30),
    -3px -3px 8px rgba(255,255,255,.008),
    6px 6px 14px rgba(0,0,0,.18);
}

.footer-access a:last-child{
  color:#081019;
  background:linear-gradient(135deg, rgba(134,220,136,.98), rgba(73,175,208,.98) 55%, rgba(34,147,255,.98));
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset -1px -1px 0 rgba(0,0,0,.14),
    0 8px 18px rgba(34,147,255,.16);
}

.footer-bottom{
  margin-top:16px;
  padding:14px 16px 0;
  border-top:0;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(16,18,22,.92), rgba(16,18,22,0));
  box-shadow:
    inset 0 1px 0 rgba(253,254,255,.04),
    inset 0 10px 16px rgba(0,0,0,.10);
}

.footer-bottom > span:first-child,
.footer-bottom-note{
  display:inline-flex;
  align-items:center;
  min-height:30px;
}

@media(max-width:980px){
  .footer-brand-block,
  .footer-nav,
  .footer-access{
    padding:16px 18px;
    border-radius:18px;
  }
  .footer-access{
    justify-content:flex-start;
  }
}

@media(max-width:620px){
  .footer-shell-minimal{
    border-radius:22px;
  }
  .footer-brand-block,
  .footer-nav,
  .footer-access{
    padding:14px 15px;
    border-radius:16px;
  }
  .footer-nav a,
  .footer-access a{
    min-height:32px;
    padding:7px 11px;
  }
  .footer-bottom{
    padding:12px 12px 0;
    border-radius:14px;
  }
}

/* =========================================================
   Real IT — v16 full embossed footer cleanup
   Whole footer becomes the embossed surface. Inner layout is
   cleaner and quieter to match the site direction.
   ========================================================= */

.public-footer{
  padding:26px 0 38px;
}

.footer-shell-minimal{
  position:relative;
  overflow:hidden;
  padding:34px 36px 24px;
  border-radius:32px;
  border:1px solid rgba(253,254,255,.05);
  background:linear-gradient(180deg,#121419 0%, #101216 100%);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.04),
    inset -1px -1px 0 rgba(0,0,0,.52),
    -10px -10px 24px rgba(255,255,255,.008),
    20px 20px 42px rgba(0,0,0,.34);
}

.footer-shell-minimal::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 14% 18%, rgba(134,220,136,.055), transparent 0 18%),
    radial-gradient(circle at 86% 14%, rgba(34,147,255,.06), transparent 0 20%);
  pointer-events:none;
}

.footer-shell-minimal::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(134,220,136,.85), rgba(73,175,208,.82), rgba(34,147,255,.85));
  opacity:.88;
}

.footer-watermark{
  right:-26px;
  bottom:-18px;
  width:min(280px,34%);
  opacity:.04;
}

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

.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,.72fr);
  gap:34px;
  align-items:start;
}

.footer-brand-block,
.footer-column{
  min-width:0;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.footer-brand img{
  width:58px;
  height:28px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.22));
}

.footer-brand span{
  color:var(--realit-white);
}

.footer-brand-block p{
  margin:0;
  max-width:430px;
  color:#a7b1c5;
  font-size:12px;
  line-height:1.7;
}

.footer-column-label{
  display:inline-block;
  margin-bottom:12px;
  color:#dce6f6;
  font-size:10px;
  letter-spacing:.12em;
}

.footer-nav,
.footer-access{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.footer-nav a,
.footer-access a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:20px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:#bdc7d8;
  text-decoration:none;
  font-size:12px;
  font-weight:500;
}

.footer-nav a::before,
.footer-access a::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(134,220,136,.9), rgba(34,147,255,.9));
  opacity:.55;
  flex:0 0 auto;
}

.footer-nav a:hover,
.footer-access a:hover{
  color:var(--realit-white);
  transform:none;
  background:transparent;
  box-shadow:none;
}

.footer-nav a:hover::before,
.footer-access a:hover::before{
  opacity:1;
}

.footer-bottom{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(253,254,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.footer-bottom > span:first-child{
  color:#95a1b7;
  font-size:10px;
}

.footer-bottom-note{
  color:#dbe7f8;
  font-size:10px;
}

@media(max-width:980px){
  .footer-shell-minimal{
    padding:30px 28px 22px;
    border-radius:28px;
  }
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:24px 28px;
  }
  .footer-brand-block{
    grid-column:1 / -1;
  }
  .footer-watermark{
    width:min(240px,42%);
  }
}

@media(max-width:620px){
  .public-footer{
    padding:16px 0 26px;
  }
  .footer-shell-minimal{
    padding:24px 20px 18px;
    border-radius:22px;
  }
  .footer-main{
    grid-template-columns:1fr;
    gap:18px;
  }
  .footer-column-label{
    margin-bottom:10px;
  }
  .footer-bottom{
    margin-top:20px;
    padding-top:14px;
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-watermark{
    width:170px;
    right:-20px;
    bottom:-10px;
  }
}

/* =========================================================
   Real IT — v17 public navigation / unified access refinement
   ========================================================= */
.public-links{
  gap:22px;
}
.public-links a{
  white-space:nowrap;
}

/* =========================================================
   Real IT — v18 owned products card refinement
   Product cards become mini product showcases and direct sales-funnel links.
   ========================================================= */

.products-heading{
  align-items:end;
}

.public-products{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.product-showcase-card{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:24px 26px 24px;
  border-radius:28px;
  background:linear-gradient(180deg,#121419 0%, #101216 100%);
  border:1px solid rgba(253,254,255,.06);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 14px 30px rgba(0,0,0,.20);
  display:flex;
  flex-direction:column;
  gap:18px;
}

.product-showcase-card::after{
  content:'';
  position:absolute;
  inset:auto -62px -62px auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(34,147,255,.12), rgba(34,147,255,0) 72%);
  box-shadow:none;
  pointer-events:none;
}

.product-card-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.85;
  background:
    radial-gradient(circle at 86% 14%, rgba(34,147,255,.11), transparent 0 20%),
    radial-gradient(circle at 14% 18%, rgba(134,220,136,.10), transparent 0 18%);
}

.product-hcih-card .product-card-glow{
  background:
    radial-gradient(circle at 86% 14%, rgba(73,175,208,.10), transparent 0 18%),
    radial-gradient(circle at 14% 18%, rgba(134,220,136,.12), transparent 0 20%);
}

.product-ritremis-card .product-card-glow{
  background:
    radial-gradient(circle at 86% 14%, rgba(34,147,255,.13), transparent 0 22%),
    radial-gradient(circle at 14% 18%, rgba(73,175,208,.10), transparent 0 16%);
}

.product-card-topline,
.product-showcase-head,
.product-showcase-card p,
.product-feature-chips,
.product-primary-link{
  position:relative;
  z-index:1;
}

.product-card-topline{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:20px;
}

.product-topline-bar{
  width:24px;
  height:2px;
  border-radius:999px;
  background:var(--brand-gradient);
  flex:0 0 auto;
}

.product-topline-text{
  color:#b7c3d7;
  font-size:10px;
  letter-spacing:.12em;
}

.product-showcase-head{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.product-showcase-icon{
  width:64px;
  height:64px;
  border-radius:22px;
  display:grid;
  place-items:center;
  color:#5cc4ea;
  background:#101216;
  border:1px solid rgba(253,254,255,.04);
  box-shadow:
    inset 7px 7px 16px rgba(0,0,0,.34),
    inset -5px -5px 12px rgba(255,255,255,.012),
    0 8px 18px rgba(0,0,0,.10);
}

.product-hcih-card .product-showcase-icon{color:#80de97}
.product-ritremis-card .product-showcase-icon{color:#54b5fb}
.product-showcase-icon svg{width:26px;height:26px}

.product-showcase-titles h3{
  margin:0;
  font-size:2.1rem;
  line-height:1;
}

.product-hook{
  display:block;
  margin-top:8px;
  color:#f3f7fd;
  font-size:1.05rem;
  line-height:1.25;
  letter-spacing:-.02em;
}

.product-showcase-card p{
  margin:0;
  max-width:34rem;
  color:#96a2b8;
  font-size:13px;
  line-height:1.72;
}

.product-feature-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}

.product-feature-chips span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  color:#d6e0f1;
  font-size:11px;
  font-weight:600;
  background:#0f1115;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.24),
    inset -4px -4px 12px rgba(255,255,255,.012);
}

.product-primary-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  width:max-content;
  padding:11px 16px;
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  color:#081019;
  background:linear-gradient(135deg, rgba(134,220,136,.98), rgba(73,175,208,.98) 55%, rgba(34,147,255,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 22px rgba(34,147,255,.18),
    inset 1px 1px 0 rgba(255,255,255,.30),
    inset -1px -1px 0 rgba(0,0,0,.16);
}

.product-primary-link svg{
  width:15px;
  height:15px;
}

.product-primary-link:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 28px rgba(34,147,255,.22),
    inset 1px 1px 0 rgba(255,255,255,.32),
    inset -1px -1px 0 rgba(0,0,0,.18);
}

@media(max-width:900px){
  .public-products{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .product-showcase-card{
    padding:22px 20px 20px;
    gap:16px;
    border-radius:24px;
  }
  .product-showcase-head{
    grid-template-columns:56px minmax(0,1fr);
    gap:14px;
  }
  .product-showcase-icon{
    width:56px;
    height:56px;
    border-radius:18px;
  }
  .product-showcase-titles h3{
    font-size:1.85rem;
  }
  .product-hook{
    font-size:.97rem;
  }
  .product-feature-chips span{
    min-height:30px;
    padding:6px 11px;
    font-size:10px;
  }
  .product-primary-link{
    min-height:40px;
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   Real IT — v19 clickable product cards with branded hover previews
   Whole card is clickable. Hover reveals a branded product preview.
   ========================================================= */

.product-showcase-card{
  position:relative;
  isolation:isolate;
  min-height:330px;
  padding:0;
}

.product-card-content,
.product-brand-preview{
  position:relative;
  z-index:1;
}

.product-card-content{
  display:flex;
  flex-direction:column;
  gap:18px;
  height:100%;
  padding:24px 26px;
  transition:transform .28s ease, opacity .28s ease;
}

.product-card-hitbox{
  position:absolute;
  inset:0;
  z-index:4;
  border-radius:inherit;
}

.product-showcase-card:hover{
  transform:translateY(-3px);
}

.product-showcase-card:hover .product-card-content{
  transform:translateY(-4px);
}

.product-showcase-card:hover .product-primary-link,
.product-showcase-card:focus-within .product-primary-link{
  box-shadow:
    0 14px 28px rgba(34,147,255,.22),
    inset 1px 1px 0 rgba(255,255,255,.32),
    inset -1px -1px 0 rgba(0,0,0,.18);
}

.product-brand-preview{
  position:absolute;
  right:22px;
  bottom:18px;
  width:min(49%, 280px);
  pointer-events:none;
  transform:translateY(10px) scale(.96);
  opacity:0;
  transition:transform .32s ease, opacity .32s ease;
}

.product-showcase-card:hover .product-brand-preview,
.product-showcase-card:focus-within .product-brand-preview{
  opacity:1;
  transform:translateY(0) scale(1);
}

.product-showcase-card:hover p,
.product-showcase-card:hover .product-feature-chips,
.product-showcase-card:focus-within p,
.product-showcase-card:focus-within .product-feature-chips{
  max-width:52%;
}

.preview-screen{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(253,254,255,.08);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.12),
    0 16px 36px rgba(0,0,0,.26);
}

.preview-screen::after{
  content:'';
  position:absolute;
  inset:auto 14px 10px 14px;
  height:18px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.24), rgba(0,0,0,0) 72%);
  filter:blur(8px);
  pointer-events:none;
}

.preview-hcih{
  background:linear-gradient(180deg,#ffffff 0%, #fff8fa 100%);
}

.preview-ritremis{
  background:linear-gradient(180deg,#fbfcff 0%, #f5f8ff 100%);
}

.preview-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
}

.preview-hcih .preview-topbar{
  background:linear-gradient(90deg,#fff1f5, #ffffff);
  border-bottom:1px solid rgba(228,163,181,.24);
}

.preview-ritremis .preview-topbar{
  background:linear-gradient(90deg,#eef5ff, #ffffff);
  border-bottom:1px solid rgba(52,118,219,.16);
}

.preview-brand{
  color:#212833;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.02em;
}

.preview-badge{
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.preview-hcih .preview-badge{
  color:#a85a76;
  background:#ffe4ed;
}

.preview-ritremis .preview-badge{
  color:#2458b5;
  background:#e7f0ff;
}

.preview-body{
  display:flex;
  gap:10px;
  padding:12px;
}

.preview-sidebar{
  width:40px;
  border-radius:14px;
  background:linear-gradient(180deg,#ffe9ef 0%, #fff4f7 100%);
}

.preview-main,
.preview-main-full{
  flex:1 1 auto;
  min-width:0;
}

.preview-toolbar{
  height:18px;
  margin-bottom:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#ffe5ee 0%, #f3f4f8 100%);
}

.preview-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:8px;
}

.preview-grid-realestate{
  grid-template-columns:1fr 1fr;
}

.preview-card,
.preview-chart,
.preview-table{
  display:block;
  border-radius:14px;
}

.preview-card{
  min-height:42px;
}

.preview-card-lg{
  min-height:64px;
  grid-row:span 2;
}

.preview-hcih .preview-card{
  background:linear-gradient(180deg,#ffffff 0%, #fff3f7 100%);
  border:1px solid rgba(228,163,181,.22);
}

.preview-ritremis .preview-card{
  background:linear-gradient(180deg,#ffffff 0%, #eff4ff 100%);
  border:1px solid rgba(52,118,219,.18);
}

.preview-chart{
  height:56px;
  margin-bottom:8px;
  background:linear-gradient(135deg, rgba(134,220,136,.25), rgba(34,147,255,.18));
  border:1px solid rgba(34,147,255,.15);
}

.preview-table{
  height:44px;
  margin-top:8px;
  background:repeating-linear-gradient(180deg,#ffffff 0 8px,#f2f6fd 8px 16px);
  border:1px solid rgba(52,118,219,.14);
}

.product-showcase-card .product-primary-link{
  pointer-events:none;
}

.product-showcase-card:focus-within{
  outline:none;
}

.product-card-hitbox:focus-visible{
  outline:2px solid rgba(34,147,255,.9);
  outline-offset:3px;
}

@media(max-width:980px){
  .product-showcase-card{
    min-height:300px;
  }
  .product-brand-preview{
    width:min(46%, 250px);
    right:18px;
    bottom:18px;
  }
}

@media(max-width:760px){
  .product-showcase-card:hover p,
  .product-showcase-card:hover .product-feature-chips,
  .product-showcase-card:focus-within p,
  .product-showcase-card:focus-within .product-feature-chips{
    max-width:none;
  }
  .product-brand-preview{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    padding:0 20px 20px;
    transform:none;
    opacity:1;
  }
  .product-card-content{
    padding-bottom:12px;
  }
}

@media(max-width:620px){
  .product-showcase-card{
    min-height:0;
  }
  .product-card-content{
    padding:22px 20px 12px;
  }
  .product-brand-preview{
    padding:0 20px 20px;
  }
  .preview-screen{
    border-radius:18px;
  }
}

/* =========================================================
   Real IT — v20 official product logos + product-brand hover states
   Real IT owns the card at rest; hover reveals the product identity.
   ========================================================= */

.product-showcase-icon{
  overflow:hidden;
  padding:9px;
}

.product-showcase-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.18));
}

.product-showcase-icon-hcih{
  background:linear-gradient(145deg,#fff4f1 0%,#f8d8d1 100%);
  border-color:rgba(240,176,160,.30);
  box-shadow:
    inset 7px 7px 16px rgba(173,106,92,.10),
    inset -5px -5px 12px rgba(255,255,255,.70),
    0 8px 18px rgba(0,0,0,.10);
}

.product-showcase-icon-ritremis{
  background:linear-gradient(145deg,#20132e 0%,#120b1d 100%);
  border-color:rgba(111,51,174,.28);
  box-shadow:
    inset 7px 7px 16px rgba(0,0,0,.32),
    inset -5px -5px 12px rgba(130,71,193,.08),
    0 8px 18px rgba(0,0,0,.12);
}

.product-hcih-card .product-card-glow{
  background:
    radial-gradient(circle at 86% 14%, rgba(240,176,160,.13), transparent 0 22%),
    radial-gradient(circle at 14% 18%, rgba(240,208,192,.10), transparent 0 20%);
  opacity:.38;
  transition:opacity .3s ease;
}

.product-ritremis-card .product-card-glow{
  background:
    radial-gradient(circle at 86% 14%, rgba(96,48,160,.16), transparent 0 24%),
    radial-gradient(circle at 14% 18%, rgba(64,16,128,.13), transparent 0 18%);
  opacity:.34;
  transition:opacity .3s ease;
}

.product-hcih-card:hover .product-card-glow,
.product-hcih-card:focus-within .product-card-glow,
.product-ritremis-card:hover .product-card-glow,
.product-ritremis-card:focus-within .product-card-glow{
  opacity:1;
}

.product-hcih-card:hover{
  border-color:rgba(240,176,160,.20);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 20px 40px rgba(73,35,30,.25);
}

.product-ritremis-card:hover{
  border-color:rgba(111,51,174,.22);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.025),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 20px 42px rgba(35,12,63,.32);
}

.preview-brand-with-logo{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.preview-brand-with-logo img{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
}

.preview-brand-with-logo b{
  color:inherit;
  font-size:12px;
}

.preview-product-watermark{
  position:absolute;
  z-index:0;
  right:-4px;
  bottom:-12px;
  width:92px;
  height:92px;
  object-fit:contain;
  opacity:.08;
  transform:rotate(-7deg);
  pointer-events:none;
}

.preview-product-watermark-ritremis{
  width:86px;
  height:86px;
  right:4px;
  bottom:-9px;
  opacity:.08;
  transform:rotate(7deg);
}

.preview-hcih{
  background:linear-gradient(180deg,#fff9f7 0%,#fff1ed 100%);
  border-color:rgba(240,176,160,.34);
}

.preview-hcih .preview-topbar{
  background:linear-gradient(90deg,#f7d9d2 0%,#fff5f2 100%);
  border-bottom:1px solid rgba(240,176,160,.34);
}

.preview-hcih .preview-brand{
  color:#7e473f;
}

.preview-hcih .preview-badge{
  color:#8c5047;
  background:#f8ddd6;
}

.preview-hcih .preview-sidebar{
  background:linear-gradient(180deg,#f6d4cc 0%,#ffebe6 100%);
}

.preview-hcih .preview-toolbar{
  background:linear-gradient(90deg,#f3cdc4 0%,#faebe7 100%);
}

.preview-hcih .preview-card{
  background:linear-gradient(180deg,#ffffff 0%,#fff0eb 100%);
  border-color:rgba(240,176,160,.30);
}

.preview-ritremis{
  background:linear-gradient(180deg,#f7f2fd 0%,#eee6f8 100%);
  border-color:rgba(96,48,160,.30);
}

.preview-ritremis .preview-topbar{
  background:linear-gradient(90deg,#e6d9f5 0%,#f8f5fc 100%);
  border-bottom:1px solid rgba(96,48,160,.22);
}

.preview-ritremis .preview-brand{
  color:#431a78;
}

.preview-ritremis .preview-badge{
  color:#4b1d81;
  background:#dfcff0;
}

.preview-ritremis .preview-chart{
  background:linear-gradient(135deg, rgba(96,48,160,.26), rgba(128,70,190,.14));
  border-color:rgba(96,48,160,.20);
}

.preview-ritremis .preview-card{
  background:linear-gradient(180deg,#ffffff 0%,#eee7f8 100%);
  border-color:rgba(96,48,160,.20);
}

.preview-ritremis .preview-table{
  background:repeating-linear-gradient(180deg,#ffffff 0 8px,#f0e9f8 8px 16px);
  border-color:rgba(96,48,160,.16);
}

.product-hcih-card:hover .product-primary-link,
.product-hcih-card:focus-within .product-primary-link{
  color:#6f4039;
  background:linear-gradient(135deg,#f3c5bb 0%,#f0b0a0 100%);
  box-shadow:
    0 12px 24px rgba(240,176,160,.16),
    inset 1px 1px 0 rgba(255,255,255,.36),
    inset -1px -1px 0 rgba(112,62,52,.12);
}

.product-ritremis-card:hover .product-primary-link,
.product-ritremis-card:focus-within .product-primary-link{
  color:#ffffff;
  background:linear-gradient(135deg,#6a32a5 0%,#401080 100%);
  box-shadow:
    0 12px 26px rgba(64,16,128,.24),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.16);
}

/* =========================================================
   Real IT — v21 product-brand spread animation
   Hover transforms the whole card, starting from the logo area and
   spreading outward across the card.
   ========================================================= */

.product-showcase-card{
  --spread-origin-x: 62px;
  --spread-origin-y: 96px;
  --spread-title: #fdfeff;
  --spread-copy: rgba(253,254,255,.78);
  --spread-muted: rgba(253,254,255,.68);
  --spread-chip-bg: rgba(253,254,255,.08);
  --spread-chip-border: rgba(253,254,255,.12);
  --spread-chip-color: #fdfeff;
  --spread-link-color: #081019;
  --spread-link-bg: linear-gradient(135deg, rgba(134,220,136,.98), rgba(73,175,208,.98) 55%, rgba(34,147,255,.98));
  --spread-link-shadow: 0 10px 22px rgba(34,147,255,.18), inset 1px 1px 0 rgba(255,255,255,.30), inset -1px -1px 0 rgba(0,0,0,.16);
  position:relative;
  overflow:hidden;
  transition:transform .28s ease, border-color .45s ease, box-shadow .45s ease;
}

.product-hcih-card{
  --spread-brand-a: #432c28;
  --spread-brand-b: #5d3a34;
  --spread-brand-c: #7d4d45;
  --spread-core: rgba(240,176,160,.96);
  --spread-mid: rgba(245,210,201,.70);
  --spread-edge: rgba(255,238,233,.18);
  --spread-border: rgba(240,176,160,.24);
  --spread-shadow: 0 22px 42px rgba(79,43,37,.34);
  --spread-link-color: #6f4039;
  --spread-link-bg: linear-gradient(135deg,#f3c5bb 0%,#f0b0a0 100%);
  --spread-link-shadow: 0 12px 24px rgba(240,176,160,.16), inset 1px 1px 0 rgba(255,255,255,.36), inset -1px -1px 0 rgba(112,62,52,.12);
}

.product-ritremis-card{
  --spread-brand-a: #20112d;
  --spread-brand-b: #33124c;
  --spread-brand-c: #4a1872;
  --spread-core: rgba(104,50,165,.96);
  --spread-mid: rgba(160,120,215,.55);
  --spread-edge: rgba(226,210,245,.16);
  --spread-border: rgba(111,51,174,.26);
  --spread-shadow: 0 22px 44px rgba(34,14,59,.36);
  --spread-link-color: #fdfeff;
  --spread-link-bg: linear-gradient(135deg,#6a32a5 0%,#401080 100%);
  --spread-link-shadow: 0 12px 26px rgba(64,16,128,.24), inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.16);
}

.product-showcase-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  clip-path:circle(0 at var(--spread-origin-x) var(--spread-origin-y));
  background:
    radial-gradient(circle at var(--spread-origin-x) var(--spread-origin-y), var(--spread-core) 0%, var(--spread-mid) 18%, rgba(17,19,23,.90) 42%, rgba(17,19,23,.28) 62%, transparent 74%),
    linear-gradient(140deg, var(--spread-brand-a) 0%, var(--spread-brand-b) 54%, var(--spread-brand-c) 100%);
  transition:clip-path .72s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  pointer-events:none;
}

.product-showcase-card::after{
  background:radial-gradient(circle at 84% 18%, var(--spread-edge), rgba(255,255,255,0) 62%);
  opacity:0;
  transition:opacity .42s ease;
}

.product-showcase-card:hover,
.product-showcase-card:focus-within{
  border-color:var(--spread-border);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.42),
    var(--spread-shadow);
}

.product-showcase-card:hover::before,
.product-showcase-card:focus-within::before{
  opacity:1;
  clip-path:circle(160% at var(--spread-origin-x) var(--spread-origin-y));
}

.product-showcase-card:hover::after,
.product-showcase-card:focus-within::after{
  opacity:1;
}

.product-card-content,
.product-brand-preview,
.product-card-topline,
.product-showcase-icon,
.product-showcase-icon img,
.product-showcase-titles h3,
.product-hook,
.product-showcase-card p,
.product-feature-chips span,
.product-primary-link,
.preview-screen,
.preview-badge,
.preview-brand,
.preview-sidebar,
.preview-toolbar,
.preview-card,
.preview-chart,
.preview-table{
  transition:
    color .36s ease,
    background .38s ease,
    border-color .38s ease,
    box-shadow .38s ease,
    opacity .32s ease,
    transform .32s ease,
    filter .38s ease;
}

.product-showcase-icon{
  position:relative;
}

.product-showcase-icon::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:30px;
  background:radial-gradient(circle, var(--spread-core) 0%, rgba(255,255,255,0) 70%);
  opacity:0;
  transform:scale(.18);
  filter:blur(4px);
  transition:transform .72s cubic-bezier(.22,1,.36,1), opacity .26s ease;
  pointer-events:none;
}

.product-showcase-card:hover .product-showcase-icon::after,
.product-showcase-card:focus-within .product-showcase-icon::after{
  opacity:.75;
  transform:scale(6.2);
}

.product-showcase-card:hover .product-showcase-icon,
.product-showcase-card:focus-within .product-showcase-icon{
  border-color:rgba(253,254,255,.10);
  box-shadow:
    inset 7px 7px 16px rgba(0,0,0,.24),
    inset -5px -5px 12px rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.16);
}

.product-hcih-card:hover .product-showcase-icon,
.product-hcih-card:focus-within .product-showcase-icon{
  background:linear-gradient(145deg,#fff7f5 0%,#f3c8bd 100%);
}

.product-ritremis-card:hover .product-showcase-icon,
.product-ritremis-card:focus-within .product-showcase-icon{
  background:linear-gradient(145deg,#2b173e 0%,#160b23 100%);
}

.product-showcase-card:hover .product-showcase-icon img,
.product-showcase-card:focus-within .product-showcase-icon img{
  transform:scale(1.03);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
}

.product-showcase-card:hover .product-topline-text,
.product-showcase-card:focus-within .product-topline-text,
.product-showcase-card:hover h3,
.product-showcase-card:focus-within h3,
.product-showcase-card:hover .product-hook,
.product-showcase-card:focus-within .product-hook{
  color:var(--spread-title);
}

.product-showcase-card:hover p,
.product-showcase-card:focus-within p{
  color:var(--spread-copy);
}

.product-showcase-card:hover .product-feature-chips span,
.product-showcase-card:focus-within .product-feature-chips span{
  color:var(--spread-chip-color);
  background:var(--spread-chip-bg);
  border-color:var(--spread-chip-border);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.05),
    inset -1px -1px 0 rgba(0,0,0,.12);
}

.product-showcase-card:hover .product-primary-link,
.product-showcase-card:focus-within .product-primary-link{
  color:var(--spread-link-color);
  background:var(--spread-link-bg);
  box-shadow:var(--spread-link-shadow);
}

.product-showcase-card:hover .product-brand-preview,
.product-showcase-card:focus-within .product-brand-preview{
  opacity:1;
  transform:translateY(0) scale(1.02);
}

.product-showcase-card:hover .preview-screen,
.product-showcase-card:focus-within .preview-screen{
  border-color:rgba(253,254,255,.16);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.24),
    inset -1px -1px 0 rgba(0,0,0,.10),
    0 18px 38px rgba(0,0,0,.30);
}

.product-showcase-card:hover .preview-product-watermark,
.product-showcase-card:focus-within .preview-product-watermark{
  opacity:.14;
}

.product-showcase-card:hover .preview-hcih,
.product-showcase-card:focus-within .preview-hcih{
  background:linear-gradient(180deg,#fffdfc 0%,#ffeae4 100%);
}

.product-showcase-card:hover .preview-ritremis,
.product-showcase-card:focus-within .preview-ritremis{
  background:linear-gradient(180deg,#fbf8ff 0%,#eadcf8 100%);
}

.product-showcase-card:hover .preview-hcih .preview-topbar,
.product-showcase-card:focus-within .preview-hcih .preview-topbar{
  background:linear-gradient(90deg,#f3c8bd 0%,#fff4f1 100%);
}

.product-showcase-card:hover .preview-ritremis .preview-topbar,
.product-showcase-card:focus-within .preview-ritremis .preview-topbar{
  background:linear-gradient(90deg,#d9c3f2 0%,#f5effc 100%);
}

.product-showcase-card:hover .preview-hcih .preview-card,
.product-showcase-card:hover .preview-hcih .preview-sidebar,
.product-showcase-card:hover .preview-hcih .preview-toolbar,
.product-showcase-card:focus-within .preview-hcih .preview-card,
.product-showcase-card:focus-within .preview-hcih .preview-sidebar,
.product-showcase-card:focus-within .preview-hcih .preview-toolbar{
  border-color:rgba(240,176,160,.34);
}

.product-showcase-card:hover .preview-ritremis .preview-card,
.product-showcase-card:hover .preview-ritremis .preview-chart,
.product-showcase-card:hover .preview-ritremis .preview-table,
.product-showcase-card:focus-within .preview-ritremis .preview-card,
.product-showcase-card:focus-within .preview-ritremis .preview-chart,
.product-showcase-card:focus-within .preview-ritremis .preview-table{
  border-color:rgba(96,48,160,.24);
}

@media (prefers-reduced-motion: reduce){
  .product-showcase-card::before,
  .product-showcase-icon::after{
    transition:none;
  }
}

@media(max-width:760px){
  .product-showcase-card::before{
    opacity:1;
    clip-path:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
      linear-gradient(140deg, rgba(18,20,25,.98) 0%, rgba(18,20,25,.96) 100%);
  }
  .product-showcase-card:hover::before,
  .product-showcase-card:focus-within::before{
    clip-path:none;
  }
  .product-showcase-icon::after{
    display:none;
  }
}

/* =========================================================
   Real IT — v22 cleaner owned product cards
   At rest, cards feel like Real IT. On hover, the brand spreads from the
   logo area into the whole card. HCiH swaps from Real IT-color logo to
   its peach/pink product identity.
   ========================================================= */

/* cleaner shared card feel */
.product-showcase-card{
  background:linear-gradient(180deg,#121419 0%, #101216 100%);
  border:1px solid rgba(253,254,255,.055);
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.44),
    0 16px 32px rgba(0,0,0,.18);
}

.product-showcase-card .product-card-glow{
  opacity:.20;
  transition:opacity .32s ease, background .42s ease;
}

.product-hcih-card .product-card-glow,
.product-ritremis-card .product-card-glow{
  background:
    radial-gradient(circle at 86% 14%, rgba(34,147,255,.09), transparent 0 20%),
    radial-gradient(circle at 14% 18%, rgba(134,220,136,.10), transparent 0 18%);
}

.product-card-content{
  gap:16px;
}

.product-showcase-card p{
  color:#98a4b8;
  max-width:36rem;
}

.product-feature-chips{
  gap:8px;
}

.product-feature-chips span{
  color:#d4deef;
  background:#0f1115;
  border:1px solid rgba(253,254,255,.045);
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.22),
    inset -3px -3px 9px rgba(255,255,255,.01);
}

.product-primary-link{
  min-height:40px;
  padding:10px 15px;
}

.product-brand-preview{
  width:min(45%, 255px);
  right:18px;
  bottom:16px;
}

.preview-screen{
  border-radius:20px;
}

.product-showcase-card:hover p,
.product-showcase-card:hover .product-feature-chips,
.product-showcase-card:focus-within p,
.product-showcase-card:focus-within .product-feature-chips{
  max-width:54%;
}

/* default HCiH logo is Real IT-colored; hover swaps to official pink */
.product-showcase-icon-hcih{
  position:relative;
  background:linear-gradient(145deg,#0f1319 0%, #11161d 100%);
  border-color:rgba(73,175,208,.20);
}

.product-showcase-icon-hcih .product-logo-default,
.product-showcase-icon-hcih .product-logo-hover{
  position:absolute;
  inset:9px;
  width:calc(100% - 18px);
  height:calc(100% - 18px);
  object-fit:contain;
}

.product-showcase-icon-hcih .product-logo-default{
  opacity:1;
}

.product-showcase-icon-hcih .product-logo-hover{
  opacity:0;
}

.product-hcih-card:hover .product-showcase-icon-hcih,
.product-hcih-card:focus-within .product-showcase-icon-hcih{
  background:linear-gradient(145deg,#fff7f5 0%,#f3c8bd 100%);
  border-color:rgba(240,176,160,.28);
}

.product-hcih-card:hover .product-showcase-icon-hcih .product-logo-default,
.product-hcih-card:focus-within .product-showcase-icon-hcih .product-logo-default{
  opacity:0;
  transform:scale(.94);
}

.product-hcih-card:hover .product-showcase-icon-hcih .product-logo-hover,
.product-hcih-card:focus-within .product-showcase-icon-hcih .product-logo-hover{
  opacity:1;
  transform:scale(1);
}

/* cleaner brand spread behavior */
.product-showcase-card::before{
  background:
    radial-gradient(circle at var(--spread-origin-x) var(--spread-origin-y), var(--spread-core) 0%, var(--spread-mid) 16%, rgba(17,19,23,.86) 38%, rgba(17,19,23,.20) 58%, transparent 72%),
    linear-gradient(140deg, var(--spread-brand-a) 0%, var(--spread-brand-b) 56%, var(--spread-brand-c) 100%);
}

.product-showcase-card::after{
  background:radial-gradient(circle at 84% 18%, var(--spread-edge), rgba(255,255,255,0) 60%);
}

.product-hcih-card{
  --spread-brand-a:#3c2a28;
  --spread-brand-b:#5a3a35;
  --spread-brand-c:#7e4d45;
  --spread-core:rgba(240,176,160,.92);
  --spread-mid:rgba(246,216,207,.60);
  --spread-edge:rgba(255,240,236,.14);
}

.product-ritremis-card{
  --spread-brand-a:#171a20;
  --spread-brand-b:#26212f;
  --spread-brand-c:#3c244f;
  --spread-core:rgba(96,48,160,.90);
  --spread-mid:rgba(162,124,214,.40);
  --spread-edge:rgba(228,216,245,.12);
}

.product-hcih-card:hover .product-card-glow,
.product-hcih-card:focus-within .product-card-glow{
  opacity:.95;
  background:
    radial-gradient(circle at 72% 24%, rgba(240,176,160,.18), transparent 0 22%),
    radial-gradient(circle at 14% 18%, rgba(248,221,213,.18), transparent 0 20%);
}

.product-ritremis-card:hover .product-card-glow,
.product-ritremis-card:focus-within .product-card-glow{
  opacity:.88;
  background:
    radial-gradient(circle at 74% 22%, rgba(96,48,160,.18), transparent 0 24%),
    radial-gradient(circle at 14% 18%, rgba(164,132,214,.16), transparent 0 18%);
}

.product-hcih-card:hover,
.product-hcih-card:focus-within{
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 20px 40px rgba(79,43,37,.28);
}

.product-ritremis-card:hover,
.product-ritremis-card:focus-within{
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.42),
    0 22px 42px rgba(34,14,59,.30);
}

.product-showcase-card:hover .product-card-content,
.product-showcase-card:focus-within .product-card-content{
  transform:translateY(-2px);
}

.product-brand-preview{
  opacity:0;
  transform:translateY(8px) scale(.98);
}

.product-showcase-card:hover .product-brand-preview,
.product-showcase-card:focus-within .product-brand-preview{
  transform:translateY(0) scale(1);
}

.preview-product-watermark{opacity:.06}
.product-showcase-card:hover .preview-product-watermark,
.product-showcase-card:focus-within .preview-product-watermark{opacity:.11}

.preview-hcih,
.preview-ritremis{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.product-hcih-card:hover .product-topline-bar,
.product-hcih-card:focus-within .product-topline-bar{
  background:linear-gradient(90deg,#f3c5bb,#f0b0a0);
}

.product-hcih-card:hover .preview-brand,
.product-hcih-card:focus-within .preview-brand{color:#7e473f}

@media(max-width:980px){
  .product-brand-preview{width:min(43%, 230px)}
}

@media(max-width:760px){
  .product-brand-preview{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    padding:0 20px 20px;
    opacity:1;
    transform:none;
  }
  .product-showcase-card:hover p,
  .product-showcase-card:hover .product-feature-chips,
  .product-showcase-card:focus-within p,
  .product-showcase-card:focus-within .product-feature-chips{max-width:none}
}

@media(max-width:620px){
  .product-card-content{padding:22px 20px 12px}
  .product-brand-preview{padding:0 20px 20px}
}

/* =========================================================
   Real IT — v24 product cards become product-hero sections on hover
   Removes the mini preview panel and turns the whole card into a
   hero-like surface for the product website.
   ========================================================= */

.product-card-hero-mode{
  position:relative;
  overflow:hidden;
  min-height:360px;
}

.product-card-hero-mode .product-card-content,
.product-card-hero-mode .product-hero-surface{
  position:relative;
  z-index:1;
}

.product-card-hero-mode .product-card-content{
  height:100%;
  padding:24px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:opacity .28s ease, transform .34s ease, filter .28s ease;
}

.product-hero-surface{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  pointer-events:none;
  padding:22px 24px 22px;
  display:flex;
  flex-direction:column;
  transform:translateY(14px);
  transition:opacity .34s ease, transform .40s ease;
}

.product-card-hero-mode:hover .product-card-content,
.product-card-hero-mode:focus-within .product-card-content{
  opacity:0;
  transform:translateY(-10px) scale(.985);
  filter:blur(3px);
}

.product-card-hero-mode:hover .product-hero-surface,
.product-card-hero-mode:focus-within .product-hero-surface{
  opacity:1;
  transform:translateY(0);
}

.product-hero-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.product-hero-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#2b2f36;
  font-size:1rem;
  font-weight:800;
}

.product-hero-brand img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.product-hero-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.12em;
  color:#7c5b56;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.28);
}

.product-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:20px;
  align-items:center;
  min-height:0;
  flex:1 1 auto;
}

.product-hero-copy{
  min-width:0;
}

.product-hero-kicker{
  display:inline-block;
  margin-bottom:10px;
  font-size:10px;
  letter-spacing:.12em;
  color:#97685f;
}

.product-hero-copy h4{
  margin:0 0 10px;
  color:#2b2f36;
  font-size:2rem;
  line-height:1.02;
  letter-spacing:-.04em;
}

.product-hero-copy p{
  margin:0;
  color:#655753;
  font-size:13px;
  line-height:1.7;
  max-width:32rem;
}

.product-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.product-hero-pills span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  color:#6f534d;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.32);
}

.product-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  min-height:40px;
  padding:10px 14px;
  margin-top:18px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#ffffff;
  box-shadow:0 12px 22px rgba(0,0,0,.10), inset 1px 1px 0 rgba(255,255,255,.18);
}

.product-hero-cta svg{width:15px;height:15px}

.product-hero-visual{
  min-width:0;
}

.hero-window{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:12px;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 18px 30px rgba(0,0,0,.12), inset 1px 1px 0 rgba(255,255,255,.30);
}

.hero-window-bar,
.hero-window-chart,
.hero-window-table,
.hero-ui-card,
.hero-side-rail{
  display:block;
  border-radius:14px;
}

.hero-window-bar{
  height:18px;
  margin-bottom:10px;
}

.hero-window-body{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
}

.hero-side-rail{
  min-height:132px;
}

.hero-ui-grid,
.hero-window-grid{
  display:grid;
  gap:8px;
}

.hero-ui-grid-hcih{
  grid-template-columns:1.1fr .9fr;
}

.hero-window-grid-ritremis{
  grid-template-columns:1.15fr .85fr;
}

.hero-ui-card{min-height:42px}
.hero-ui-card-large{min-height:88px;grid-row:span 2}
.hero-ui-card-wide{grid-column:1 / -1;min-height:36px}
.hero-window-chart{height:54px;margin-bottom:8px}
.hero-window-table{height:42px;margin-top:8px}

.hero-surface-hcih{
  background:linear-gradient(180deg,#fdf4f1 0%, #f6dcd4 100%);
}

.hero-surface-hcih .product-hero-cta{
  color:#fff;
  background:linear-gradient(135deg,#e8a798 0%,#d99182 100%);
}

.hero-surface-hcih .hero-window{
  background:linear-gradient(180deg,#fffdfa 0%, #f9e8e2 100%);
}

.hero-surface-hcih .hero-window-bar,
.hero-surface-hcih .hero-side-rail,
.hero-surface-hcih .hero-ui-card,
.hero-surface-hcih .hero-window-table{
  background:linear-gradient(180deg,#fff9f7 0%, #f2ddd7 100%);
  border:1px solid rgba(229,181,167,.48);
}

.hero-surface-hcih .hero-window-chart{
  background:linear-gradient(135deg, rgba(240,176,160,.35), rgba(250,225,217,.95));
  border:1px solid rgba(229,181,167,.48);
}

.hero-surface-ritremis{
  background:linear-gradient(180deg,#241233 0%, #34154e 100%);
}

.hero-surface-ritremis .product-hero-brand,
.hero-surface-ritremis .product-hero-copy h4,
.hero-surface-ritremis .product-hero-kicker{
  color:#fdfeff;
}

.hero-surface-ritremis .product-hero-copy p{
  color:rgba(253,254,255,.75);
}

.hero-surface-ritremis .product-hero-badge{
  color:#f3edff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.16);
}

.hero-surface-ritremis .product-hero-pills span{
  color:#ffffff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
}

.hero-surface-ritremis .product-hero-cta{
  color:#fff;
  background:linear-gradient(135deg,#7d45bf 0%,#59249c 100%);
}

.hero-surface-ritremis .hero-window{
  background:linear-gradient(180deg,#fbf8ff 0%, #eee4fa 100%);
  border-color:rgba(255,255,255,.28);
}

.hero-surface-ritremis .hero-window-bar,
.hero-surface-ritremis .hero-ui-card,
.hero-surface-ritremis .hero-window-table{
  background:linear-gradient(180deg,#ffffff 0%, #ede3fa 100%);
  border:1px solid rgba(129,86,189,.26);
}

.hero-surface-ritremis .hero-window-chart{
  background:linear-gradient(135deg, rgba(125,69,191,.36), rgba(100,174,255,.22));
  border:1px solid rgba(129,86,189,.26);
}

.product-card-hero-mode:hover .product-brand-preview,
.product-card-hero-mode:focus-within .product-brand-preview{
  display:none !important;
}

@media(max-width:900px){
  .product-card-hero-mode{min-height:340px}
  .product-hero-copy h4{font-size:1.75rem}
}

@media(max-width:760px){
  .product-card-hero-mode{
    min-height:0;
  }
  .product-card-hero-mode .product-card-content{
    display:none;
  }
  .product-hero-surface{
    position:relative;
    opacity:1;
    transform:none;
    padding:20px;
  }
  .product-hero-layout{
    grid-template-columns:1fr;
    gap:16px;
  }
  .product-hero-copy h4{font-size:1.6rem}
}

/* =========================================================
   Real IT — v25 product hero layout fix + cleanup
   The hover hero replaces the card in-place. No stacked/empty space.
   ========================================================= */

.product-card-hero-mode{
  min-height:350px;
}

.product-card-hero-mode .product-card-content{
  position:relative !important;
  z-index:1;
  display:flex !important;
  min-height:350px;
}

.product-card-hero-mode .product-hero-surface{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  width:100%;
  height:100%;
  min-height:0;
  box-sizing:border-box;
  overflow:hidden;
  opacity:0;
  transform:translateY(10px) scale(.995);
  background-clip:padding-box;
}

.product-card-hero-mode:hover .product-card-content,
.product-card-hero-mode:focus-within .product-card-content{
  opacity:0;
  transform:translateY(-6px) scale(.99);
  filter:blur(2px);
}

.product-card-hero-mode:hover .product-hero-surface,
.product-card-hero-mode:focus-within .product-hero-surface{
  opacity:1;
  transform:translateY(0) scale(1);
}

.product-card-hero-mode:hover .product-card-glow,
.product-card-hero-mode:focus-within .product-card-glow{
  opacity:0;
}

/* Make the product hero feel like an actual landing hero, not a mini preview */
.product-hero-surface{
  padding:24px 26px;
}

.hero-surface-hcih{
  background:
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.45), transparent 0 24%),
    linear-gradient(135deg,#fff8f5 0%,#f7dcd4 56%,#efc2b6 100%);
}

.hero-surface-ritremis{
  background:
    radial-gradient(circle at 86% 12%, rgba(180,122,230,.22), transparent 0 24%),
    linear-gradient(135deg,#21102f 0%,#301345 56%,#471967 100%);
}

.product-hero-header{
  margin-bottom:18px;
}

.product-hero-brand img{
  width:30px;
  height:30px;
}

.product-hero-layout{
  grid-template-columns:minmax(0,1.12fr) minmax(220px,.88fr);
  gap:26px;
  height:100%;
  align-items:center;
}

.product-hero-copy h4{
  font-size:clamp(1.8rem,2.7vw,2.45rem);
  line-height:.98;
  max-width:520px;
}

.product-hero-copy p{
  max-width:500px;
}

.product-hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-hero-visual::before{
  content:'';
  position:absolute;
  width:190px;
  height:190px;
  right:-22px;
  bottom:-38px;
  opacity:.10;
  background:center/contain no-repeat;
  pointer-events:none;
}

.hero-surface-hcih .product-hero-visual::before{
  background-image:url('../img/hcih-product-logo.png');
}

.hero-surface-ritremis .product-hero-visual::before{
  background-image:url('../img/ritremis-product-logo.png');
  opacity:.12;
}

.hero-window{
  width:100%;
  max-width:310px;
  transform:rotate(1.2deg);
}

.hero-window-hcih{
  box-shadow:0 20px 35px rgba(117,72,62,.15), inset 1px 1px 0 rgba(255,255,255,.42);
}

.hero-window-ritremis{
  box-shadow:0 20px 36px rgba(22,7,39,.34), inset 1px 1px 0 rgba(255,255,255,.34);
}

/* medium screens: the card is full-width, keep hero clean and horizontal */
@media(max-width:900px){
  .product-card-hero-mode,
  .product-card-hero-mode .product-card-content{
    min-height:330px;
  }
  .product-hero-surface{
    padding:22px 24px;
  }
  .product-hero-layout{
    grid-template-columns:minmax(0,1.2fr) minmax(190px,.8fr);
    gap:20px;
  }
  .product-hero-copy h4{
    font-size:1.9rem;
  }
  .hero-window{
    max-width:250px;
  }
}

/* narrow screens: keep the Real IT card at rest and show a compact product hero on hover/focus */
@media(max-width:760px){
  .product-card-hero-mode,
  .product-card-hero-mode .product-card-content{
    min-height:330px;
  }

  .product-card-hero-mode .product-card-content{
    display:flex !important;
    padding:22px 20px;
  }

  .product-card-hero-mode .product-hero-surface{
    position:absolute !important;
    inset:0 !important;
    opacity:0;
    padding:22px 20px;
    transform:translateY(8px) scale(.995);
  }

  .product-card-hero-mode:hover .product-hero-surface,
  .product-card-hero-mode:focus-within .product-hero-surface{
    opacity:1;
    transform:none;
  }

  .product-hero-layout{
    grid-template-columns:1fr;
    gap:0;
    align-items:start;
  }

  .product-hero-copy h4{
    max-width:430px;
    font-size:1.75rem;
    line-height:1.02;
  }

  .product-hero-copy p{
    max-width:440px;
    font-size:12px;
  }

  .product-hero-pills{
    margin-top:14px;
  }

  .product-hero-cta{
    margin-top:16px;
  }

  .product-hero-visual{
    position:absolute;
    right:-34px;
    bottom:-46px;
    width:170px;
    height:170px;
    opacity:.11;
  }

  .product-hero-visual .hero-window{
    display:none;
  }

  .product-hero-visual::before{
    width:165px;
    height:165px;
    right:0;
    bottom:0;
    opacity:1;
  }
}

@media(max-width:520px){
  .product-card-hero-mode,
  .product-card-hero-mode .product-card-content{
    min-height:350px;
  }
  .product-hero-surface{
    padding:20px 18px !important;
  }
  .product-hero-header{
    margin-bottom:16px;
  }
  .product-hero-copy h4{
    font-size:1.62rem;
  }
  .product-hero-pills{
    gap:6px;
  }
  .product-hero-pills span{
    font-size:9px;
    padding:5px 9px;
    min-height:28px;
  }
}

/* Touch devices do not have a dependable hover state: keep default Real IT card clean. */
@media (hover:none) and (pointer:coarse){
  .product-card-hero-mode .product-card-content{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .product-card-hero-mode .product-hero-surface{
    opacity:0 !important;
    transform:none !important;
  }
}

/* =========================================================
   Real IT — v26 final cleanup pass for product hero cards
   Polishes spacing, hierarchy, and visual restraint.
   ========================================================= */

.public-products{
  align-items:stretch;
}

.product-card-hero-mode{
  min-height:336px;
  border-radius:28px;
  box-shadow:
    inset 1px 1px 0 rgba(253,254,255,.028),
    inset -1px -1px 0 rgba(0,0,0,.40),
    0 14px 28px rgba(0,0,0,.16);
}

.product-card-hero-mode .product-card-content,
.product-card-hero-mode .product-hero-surface{
  min-height:336px;
}

.product-card-hero-mode .product-card-content{
  padding:22px 24px;
  gap:15px;
}

.product-card-topline{
  gap:8px;
}

.product-topline-bar{
  width:20px;
}

.product-topline-text{
  font-size:10px;
  letter-spacing:.11em;
  color:#afbdd2;
}

.product-showcase-head{
  grid-template-columns:60px minmax(0,1fr);
  gap:14px;
}

.product-showcase-icon{
  width:60px;
  height:60px;
  border-radius:20px;
}

.product-showcase-titles h3{
  font-size:2rem;
}

.product-hook{
  margin-top:6px;
  font-size:1rem;
  line-height:1.25;
}

.product-showcase-card p{
  font-size:12.5px;
  line-height:1.68;
  color:#9aa6bb;
}

.product-feature-chips span{
  min-height:30px;
  padding:6px 11px;
  font-size:10px;
  font-weight:700;
}

.product-primary-link{
  min-height:38px;
  padding:9px 14px;
  font-size:11px;
}

.product-card-hitbox{
  border-radius:inherit;
}

.product-card-hero-mode:hover .product-card-content,
.product-card-hero-mode:focus-within .product-card-content{
  transform:translateY(-4px) scale(.992);
  filter:blur(1.5px);
}

.product-hero-surface{
  padding:22px 24px;
}

.hero-surface-hcih{
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.30), transparent 0 28%),
    radial-gradient(circle at 84% 80%, rgba(233,177,164,.22), transparent 0 24%),
    linear-gradient(140deg,#fff8f5 0%, #f5ddd6 58%, #efc7bb 100%);
}

.hero-surface-ritremis{
  background:
    radial-gradient(circle at 16% 10%, rgba(197,154,235,.14), transparent 0 22%),
    radial-gradient(circle at 88% 82%, rgba(101,54,164,.18), transparent 0 20%),
    linear-gradient(140deg,#21102f 0%, #2d1242 58%, #451967 100%);
}

.product-hero-header{
  margin-bottom:16px;
}

.product-hero-brand{
  gap:9px;
  font-size:.98rem;
}

.product-hero-brand img{
  width:28px;
  height:28px;
}

.product-hero-badge{
  min-height:26px;
  padding:0 11px;
  font-size:9px;
  letter-spacing:.10em;
  backdrop-filter:blur(6px);
}

.product-hero-layout{
  grid-template-columns:minmax(0,1.12fr) minmax(210px,.88fr);
  gap:22px;
}

.product-hero-kicker{
  margin-bottom:8px;
  font-size:9.5px;
  letter-spacing:.14em;
}

.product-hero-copy h4{
  margin-bottom:10px;
  max-width:500px;
  font-size:clamp(1.72rem,2.55vw,2.28rem);
  line-height:1.0;
}

.product-hero-copy p{
  font-size:12.5px;
  line-height:1.68;
  max-width:470px;
}

.product-hero-pills{
  gap:7px;
  margin-top:14px;
}

.product-hero-pills span{
  min-height:28px;
  padding:5px 10px;
  font-size:9.5px;
}

.product-hero-cta{
  min-height:38px;
  padding:9px 13px;
  margin-top:16px;
  font-size:11px;
  box-shadow:0 10px 18px rgba(0,0,0,.09), inset 1px 1px 0 rgba(255,255,255,.18);
}

.product-hero-cta svg{
  width:14px;
  height:14px;
}

.product-hero-visual::before{
  width:170px;
  height:170px;
  right:-18px;
  bottom:-26px;
  opacity:.075;
}

.hero-window{
  max-width:286px;
  padding:11px;
  border-radius:20px;
  transform:rotate(.6deg);
}

.hero-window-bar{
  height:16px;
  margin-bottom:9px;
  border-radius:999px;
}

.hero-window-body{
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
}

.hero-side-rail{
  min-height:122px;
  border-radius:12px;
}

.hero-ui-grid,
.hero-window-grid{
  gap:7px;
}

.hero-ui-card{
  min-height:38px;
  border-radius:12px;
}

.hero-ui-card-large{
  min-height:80px;
}

.hero-ui-card-wide,
.hero-window-table{
  min-height:34px;
}

.hero-window-chart{
  height:50px;
  margin-bottom:7px;
}

.hero-window-table{
  margin-top:7px;
}

.hero-window-hcih{
  box-shadow:0 16px 28px rgba(117,72,62,.12), inset 1px 1px 0 rgba(255,255,255,.40);
}

.hero-window-ritremis{
  box-shadow:0 16px 30px rgba(22,7,39,.28), inset 1px 1px 0 rgba(255,255,255,.32);
}

@media(max-width:900px){
  .product-card-hero-mode,
  .product-card-hero-mode .product-card-content,
  .product-card-hero-mode .product-hero-surface{
    min-height:320px;
  }
  .product-card-hero-mode .product-card-content,
  .product-hero-surface{
    padding:20px 22px;
  }
  .product-hero-layout{
    grid-template-columns:minmax(0,1.15fr) minmax(180px,.85fr);
    gap:18px;
  }
  .product-hero-copy h4{
    font-size:1.82rem;
  }
  .hero-window{
    max-width:232px;
  }
}

@media(max-width:760px){
  .product-card-hero-mode,
  .product-card-hero-mode .product-card-content,
  .product-card-hero-mode .product-hero-surface{
    min-height:316px;
  }
  .product-card-hero-mode .product-card-content,
  .product-hero-surface{
    padding:20px;
  }
  .product-hero-copy h4{
    font-size:1.62rem;
    max-width:350px;
  }
  .product-hero-copy p{
    max-width:360px;
    font-size:12px;
  }
  .product-hero-visual{
    right:-20px;
    bottom:-28px;
    width:132px;
    height:132px;
    opacity:.09;
  }
  .product-hero-visual::before{
    width:128px;
    height:128px;
  }
}

@media(max-width:520px){
  .product-card-hero-mode,
  .product-card-hero-mode .product-card-content,
  .product-card-hero-mode .product-hero-surface{
    min-height:328px;
  }
  .product-showcase-titles h3{
    font-size:1.86rem;
  }
  .product-hook{
    font-size:.95rem;
  }
  .product-hero-copy h4{
    font-size:1.5rem;
  }
  .product-hero-badge{
    padding:0 10px;
  }
}

/* =========================================================
   Real IT — v27 full-card product click target
   The entire product card is one reliable link in both default
   and product-hero states.
   ========================================================= */

.product-card-hero-mode{
  cursor:pointer;
}

.product-card-hero-mode .product-card-hitbox{
  position:absolute !important;
  inset:0 !important;
  z-index:50 !important;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  cursor:pointer;
  background:transparent;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.product-card-hero-mode .product-card-content,
.product-card-hero-mode .product-hero-surface,
.product-card-hero-mode .product-card-glow{
  pointer-events:none;
}

.product-card-hero-mode:hover .product-hero-cta,
.product-card-hero-mode:focus-within .product-hero-cta{
  transform:translateY(-1px);
}

.product-card-hero-mode:hover .product-hero-cta svg,
.product-card-hero-mode:focus-within .product-hero-cta svg{
  transform:translate(2px,-1px);
}

.product-card-hero-mode .product-hero-cta svg{
  transition:transform .2s ease;
}

.product-card-hero-mode .product-card-hitbox:focus-visible{
  outline:2px solid rgba(73,175,208,.95);
  outline-offset:4px;
}

.product-hcih-card .product-card-hitbox:focus-visible{
  outline-color:rgba(240,176,160,.95);
}

.product-ritremis-card .product-card-hitbox:focus-visible{
  outline-color:rgba(139,83,199,.95);
}

/* =========================================================
   Real IT — Sidebar relief scrollbar
   Debossed rail + embossed thumb to match the HQ material UI.
   ========================================================= */
.sidebar-nav{
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(73,175,208,.62) transparent;
  overscroll-behavior:contain;
}

/* Chromium / Edge / Safari */
.sidebar-nav::-webkit-scrollbar{
  width:13px;
}

.sidebar-nav::-webkit-scrollbar-track{
  margin-block:8px 10px;
  border:3px solid transparent;
  border-radius:999px;
  background:var(--relief-bg);
  background-clip:padding-box;
  box-shadow:
    inset 3px 3px 7px rgba(116,137,165,.18),
    inset -3px -3px 7px rgba(255,255,255,.82);
}

.sidebar-nav::-webkit-scrollbar-thumb{
  min-height:48px;
  border:3px solid transparent;
  border-radius:999px;
  background:
    linear-gradient(180deg,
      rgba(134,220,136,.74) 0%,
      rgba(73,175,208,.78) 52%,
      rgba(34,147,255,.82) 100%) padding-box;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.34),
    inset -1px -1px 0 rgba(8,75,130,.18),
    1px 1px 4px rgba(86,106,135,.16);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover{
  background:var(--brand-gradient) padding-box;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.42),
    inset -1px -1px 0 rgba(8,75,130,.22),
    0 0 10px rgba(73,175,208,.18);
}

.sidebar-nav::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(180deg,
      rgba(34,147,255,.92),
      rgba(73,175,208,.90)) padding-box;
  box-shadow:
    inset 2px 2px 5px rgba(4,42,75,.22),
    inset -1px -1px 2px rgba(255,255,255,.18);
}

/* Dark mode: the rail remains carved into #101010-era surfaces,
   while the handle reads as a softly raised branded control. */
:root[data-theme="dark"] .sidebar-nav{
  scrollbar-color:rgba(73,175,208,.68) transparent;
}

:root[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-track{
  background:#17191d;
  background-clip:padding-box;
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.54),
    inset -3px -3px 8px rgba(45,49,57,.24),
    inset 1px 1px 0 rgba(255,255,255,.015);
}

:root[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg,
      rgba(134,220,136,.66) 0%,
      rgba(73,175,208,.72) 52%,
      rgba(34,147,255,.78) 100%) padding-box;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.32),
    1px 1px 5px rgba(0,0,0,.38);
}

:root[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover{
  background:var(--brand-gradient) padding-box;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.24),
    inset -1px -1px 0 rgba(0,0,0,.38),
    0 0 12px rgba(73,175,208,.16);
}