:root {
  --bg: #FFFFFF; --bg-soft: #F4F7FC; --paper: #FFFFFF; --ink: #0C1526;
  --mut: #6E7891; --mut-2: #98A2B8; --line: rgba(12,21,38,.08);
  --dark: #05070D; --dark-2: #0D1220; --dark-line: rgba(255,255,255,.1);
  --dark-glass: rgba(255,255,255,.05); --white: #F4F8FC; --dim: #90A0B8;
  --dim-2: #5C6B82; --blue: #16A34A; --blue-deep: #0D7C3D; --glow: #34D399;
  --blue-soft: rgba(22,163,74,.1); --amber: #E8960C;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-d: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-s: 12px; --r-m: 18px; --r-l: 24px; --r-xl: 30px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 10px 28px -14px rgba(12,21,38,.14);
  --shadow-lg: 0 26px 60px -20px rgba(12,21,38,.2);
  --max: 1400px; --pad: clamp(20px, 6vw, 80px);
  --focus-ring: 0 0 0 3px rgba(52,211,153,.5);
  /* FIX: real header height, kept in sync by oxalix_output_header_scripts().
     The static fallback below only matters before JS runs / if JS is
     disabled — it's a best-effort mobile estimate (bar + nav row). */
  --oxalix-header-h: 96px;
}

@media(min-width:640px){ :root { --oxalix-header-h: 104px; } }
@media(min-width:900px){ :root { --oxalix-header-h: 112px; } }

.oxalix-scope { max-width: 100%; }
.oxalix-scope *, .oxalix-scope *::before, .oxalix-scope *::after { box-sizing: border-box; margin: 0; padding: 0; }
.oxalix-scope p,
.entry-content .oxalix-scope p,
.oxalix-scope .entry-content p { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; }
.oxalix-scope a,
.oxalix-scope a:link,
.oxalix-scope a:visited,
.oxalix-scope a:hover,
.oxalix-scope a:focus,
.oxalix-scope a:active { color:inherit !important; text-decoration: none !important; background: none; }
.oxalix-scope button { font-family: inherit; cursor: pointer; border: none; background: none; color:inherit !important; }
.oxalix-scope ul { list-style: none; }
.oxalix-scope img { max-width: 100%; display: block; }

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

body { font-family: var(--font-d); background: var(--bg); color:var(--ink) !important; overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.6; font-size: 16px; }

.oxalix-scope a:focus-visible,
.oxalix-scope button:focus-visible,
.oxalix-scope input:focus-visible,
.oxalix-scope select:focus-visible,
.oxalix-scope textarea:focus-visible,
.oxalix-scope summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

.oxalix-scope .wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.oxalix-scope section { position:relative; padding:52px 0; }
@media(min-width:900px){ .oxalix-scope section { padding:80px 0; } }

/* FIX (hero cropped under sticky nav): every anchor-target section and
   the hero itself now reserve exactly the header's real, live-measured
   height when the browser scrolls to them — via anchor link, mobile
   menu link, or hash URL — instead of landing flush at y:0 underneath
   the sticky bar+nav. This is what actually caused "the first heading
   is partially hidden": nav-wrap is `position:sticky; top:0`, so any
   scroll target that lands exactly at the top of the viewport gets the
   header's ~96-112px stacked visually over it. */
.oxalix-scope section[id],
.oxalix-scope .hero,
.oxalix-scope .page-head {
  scroll-margin-top: var(--oxalix-header-h);
}

.oxalix-scope .sec-tint { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.oxalix-scope h1, .oxalix-scope h2, .oxalix-scope h3 { font-family:var(--font-d); font-weight:800; letter-spacing:-0.025em; line-height:1.1; }
.oxalix-scope h2 { font-size:clamp(26px, 3.6vw, 42px); }
.oxalix-scope h3 { font-size:16px; font-weight:700; }
@media(min-width:640px){ .oxalix-scope h3 { font-size:17px; } }
.oxalix-scope .lede { font-size:14.5px; line-height:1.65; color:var(--mut) !important; max-width:56ch; }
@media(min-width:640px){ .oxalix-scope .lede { font-size:clamp(15px, 1.5vw, 17px); } }
.oxalix-scope .eyebrow { display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep) !important; margin-bottom:14px; }
.oxalix-scope .sec-head { margin-bottom:36px; }
.oxalix-scope .sec-head .lede { margin-top:10px; text-align:left; }
@media(min-width:900px){
  .oxalix-scope .sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:44px; }
  .oxalix-scope .sec-head .lede { margin-top:0; text-align:right; }
}
.oxalix-scope .r-my { display:none; }
.oxalix-scope[data-region="my"] .r-sg { display:none; }
.oxalix-scope[data-region="my"] .r-my { display:inline; }
.oxalix-scope .center-head { text-align:center; margin:0 auto 36px; max-width:64ch; }
.oxalix-scope .center-head .lede { margin:12px auto 0; text-align:center; }
@media(min-width:900px){ .oxalix-scope .center-head { margin-bottom:52px; } }

.oxalix-scope .btn {
  position:relative; overflow:hidden; padding:14px 24px; border-radius:100px;
  font-size:14.5px; font-weight:700; font-family:var(--font-d); letter-spacing:-0.01em;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
  transition:transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), background .3s;
  cursor:pointer; border:none; text-decoration:none;
}
@media(min-width:640px){ .oxalix-scope .btn { padding:15px 26px; } }
.oxalix-scope .btn:active { transform:scale(0.97); }
.oxalix-scope .btn-primary { background:linear-gradient(135deg, var(--glow), var(--blue-deep)); color:#fff !important; box-shadow:0 4px 24px rgba(22,163,74,0.35), inset 0 1px 1px rgba(255,255,255,0.35); }
.oxalix-scope .btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(22,163,74,0.5); }
.oxalix-scope .btn-secondary { background:rgba(12,21,38,.04); border:1px solid var(--line); color:var(--ink) !important; }
.oxalix-scope .btn-secondary:hover { background:rgba(12,21,38,.08); border-color:rgba(22,163,74,.4); transform:translateY(-3px); }
.oxalix-scope .btn-secondary.dk { background:var(--dark-glass); border-color:var(--dark-line); color:#fff !important; }
.oxalix-scope .btn-secondary.dk:hover { background:rgba(255,255,255,.1); }
.oxalix-scope .btn-wa { background:#25D366; color:#fff !important; box-shadow:0 4px 20px rgba(37,211,102,.3); }
.oxalix-scope .btn-wa:hover { background:#1FBE5A; transform:translateY(-3px); }
.oxalix-scope .btn-ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,0.5); transform:scale(0); animation:rippleAnim .7s var(--ease-soft); pointer-events:none; }
@keyframes rippleAnim { to { transform:scale(3.2); opacity:0; } }

.oxalix-scope .bar,
.oxalix-scope .nav-wrap,
.oxalix-scope footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.oxalix-scope .bar {
  position:relative; z-index:10;
  border-bottom:1px solid var(--dark-line);
  background:var(--dark); font-size:12px; padding:9px 0;
  /* FIX: notched iPhones in landscape place the status bar/notch over
     the top edge; without this the announcement bar text can sit
     under the notch. */
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
}
@media(min-width:640px){ .oxalix-scope .bar { font-size:12.5px; padding:10px 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); } }
.oxalix-scope .bar-in { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.oxalix-scope .bar-status { display:flex; align-items:center; gap:8px; color:var(--dim) !important; font-family:var(--mono); font-weight:500; letter-spacing:.02em; }
.oxalix-scope .bar-status span#bar-status-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw; }
@media(min-width:640px){ .oxalix-scope .bar-status span#bar-status-text { max-width:none; } }
.oxalix-scope .bar-status .dot { width:6px; height:6px; border-radius:50%; background:var(--glow); box-shadow:0 0 8px 2px rgba(52,211,153,.7); flex:none; animation:pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.75)} }
.oxalix-scope .bar-links { display:none; gap:20px; align-items:center; }
.oxalix-scope .bar-links a { display:inline-flex; gap:6px; align-items:center; color:var(--dim) !important; transition:color .3s; }
.oxalix-scope .bar-links a:hover { color:var(--glow) !important; }
@media(min-width:900px){ .oxalix-scope .bar-links { display:flex; } }

.oxalix-scope .nav-wrap {
  position:sticky; top:0; z-index:100;
  background:rgba(5,7,13,.88); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--dark-line);
}
.oxalix-scope .nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
@media(min-width:640px){ .oxalix-scope .nav { padding:16px 0; } }
.oxalix-scope .logo { display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; letter-spacing:-0.02em; color:#fff !important; }
@media(min-width:640px){ .oxalix-scope .logo { font-size:19px; } }
.oxalix-scope .logo-mark { width:36px; height:36px; border-radius:10px; overflow:hidden; flex-shrink:0; background:transparent; box-shadow:0 0 18px rgba(52,211,153,.35); }
.oxalix-scope .logo-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.oxalix-scope .nav-links { display:none; gap:34px; font-size:14px; color:var(--dim) !important; font-weight:500; }
.oxalix-scope .nav-links a { position:relative; transition:color .3s; }
.oxalix-scope .nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--glow); transition:width .35s var(--ease-soft); }
.oxalix-scope .nav-links a:hover { color:#fff !important; }
.oxalix-scope .nav-links a:hover::after, .oxalix-scope .nav-links a[aria-current="page"]::after { width:100%; }
.oxalix-scope .nav-links a[aria-current="page"] { color:#fff !important; }
@media(min-width:960px){ .oxalix-scope .nav-links { display:flex; } }
.oxalix-scope .nav-right { display:flex; align-items:center; gap:10px; }
@media(min-width:640px){ .oxalix-scope .nav-right { gap:12px; } }
.oxalix-scope .cart-btn { width:44px; height:44px; border:1px solid var(--dark-line); border-radius:10px; background:var(--dark-glass); display:grid; place-items:center; font-size:15px; color:#fff !important; transition:border-color .3s,background .3s; }
.oxalix-scope .cart-btn:hover { border-color:rgba(52,211,153,.5); background:rgba(255,255,255,.1); }
.oxalix-scope .segctrl { position:relative; display:none; background:var(--dark-glass); border:1px solid var(--dark-line); border-radius:100px; padding:3px; gap:2px; }
@media(min-width:480px){ .oxalix-scope .nav-right > .segctrl { display:inline-flex; } }
.oxalix-scope .m-menu .segctrl { display:inline-flex; }
.oxalix-scope .seg-opt { position:relative; z-index:2; border:none; background:transparent; padding:9px 12px; border-radius:100px; font-family:var(--font-d); font-weight:700; font-size:12px; color:var(--dim) !important; cursor:pointer; transition:color .3s; white-space:nowrap; min-height:0; }
.oxalix-scope .seg-opt.is-active { color:#fff !important; }
.oxalix-scope .seg-thumb { position:absolute; top:3px; left:3px; height:calc(100% - 6px); width:calc(50% - 3px); background:linear-gradient(135deg, var(--glow), var(--blue-deep)); border-radius:100px; transition:transform .38s var(--ease-soft); z-index:1; box-shadow:0 4px 14px -4px rgba(22,163,74,.6); }
.oxalix-scope[data-region="my"] .seg-thumb { transform:translateX(100%); }
.oxalix-scope .nav-cta { display:none; font-size:13.5px; font-weight:700; padding:10px 20px; border-radius:100px; background:linear-gradient(135deg, var(--glow), var(--blue-deep)); color:#fff !important; box-shadow:0 4px 20px rgba(22,163,74,.35); transition:transform .35s var(--ease-soft), box-shadow .35s; }
.oxalix-scope .nav-cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(22,163,74,.5); }
@media(min-width:960px){ .oxalix-scope .nav-cta { display:inline-flex; align-items:center; } }

/* FIX: burger must be a real, guaranteed-clickable hit target — explicit
   z-index above the nav row and pointer cursor, so nothing painted after
   it in the stacking order (glow effects, pseudo-elements, etc.) can
   silently swallow the tap on mobile. */
.oxalix-scope .burger { position:relative; z-index:5; width:44px; height:44px; border:1px solid var(--dark-line); border-radius:10px; background:var(--dark-glass); display:grid; place-items:center; font-size:18px; cursor:pointer; color:#fff !important; touch-action: manipulation; }
@media(min-width:960px){ .oxalix-scope .burger { display:none; } }

.oxalix-scope .m-overlay {
  position:fixed; inset:0; z-index:198;
  background:rgba(5,7,13,.6); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.oxalix-scope .m-overlay.open { opacity:1; pointer-events:auto; }
.oxalix-scope .m-menu {
  position:fixed; top:0; right:0; bottom:0; z-index:199;
  width:min(340px,84vw); max-width:340px;
  background:rgba(5,7,13,.98); backdrop-filter:blur(20px);
  border-left:1px solid var(--dark-line);
  padding:18px 20px 24px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.5);
}
.oxalix-scope .m-menu.open { transform:translateX(0); }
.oxalix-scope .m-menu-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid var(--dark-line); }
.oxalix-scope .m-menu-head span { font-weight:800; font-size:15px; color:#fff !important; letter-spacing:-0.01em; }
.oxalix-scope .m-close { width:40px; height:40px; border:1px solid var(--dark-line); border-radius:10px; background:var(--dark-glass); display:grid; place-items:center; font-size:16px; cursor:pointer; color:#fff !important; flex:none; touch-action: manipulation; }
.oxalix-scope .m-menu a { display:flex; justify-content:space-between; align-items:center; padding:14px 4px; border-bottom:1px solid var(--dark-line); font-weight:600; color:var(--dim) !important; min-height:44px; }
.oxalix-scope .m-menu a:hover, .oxalix-scope .m-menu a[aria-current="page"] { color:#fff !important; }
.oxalix-scope .m-menu a i { color:var(--glow) !important; font-size:12px; }
.oxalix-scope .m-menu .nav-cta { display:flex; width:100%; margin-top:14px; justify-content:center; flex:none; }
.oxalix-scope .m-menu .segctrl { margin-top:14px; width:100%; justify-content:center; flex:none; }
@media(min-width:960px){ .oxalix-scope .m-menu, .oxalix-scope .m-overlay { display:none !important; } }

.oxalix-scope .crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--dim) !important; font-family:var(--mono); position:relative; z-index:2; }
.oxalix-scope .crumbs a { color:var(--dim) !important; transition:color .3s; }
.oxalix-scope .crumbs a:hover { color:var(--glow) !important; }
.oxalix-scope .crumbs i { font-size:9px; color:var(--dim-2) !important; }
.oxalix-scope .crumbs [aria-current="page"] { color:#fff !important; }

.oxalix-scope .page-head { position:relative; background:var(--dark); overflow:hidden; padding:34px 0 46px; }
@media(min-width:900px){ .oxalix-scope .page-head { padding:56px 0 68px; } }
.oxalix-scope .page-head .hero-bg-vignette,
.oxalix-scope .page-head .hero-bg-grid { position:absolute; inset:0; z-index:0; pointer-events:none; }
.oxalix-scope .page-head-in { position:relative; z-index:2; max-width:74ch; }
.oxalix-scope .page-head .eyebrow { color:var(--glow) !important; }
.oxalix-scope .page-head h1 { font-size:clamp(30px, 8vw, 46px); color:#fff !important; margin-top:14px; letter-spacing:-0.03em; }
@media(min-width:768px){ .oxalix-scope .page-head h1 { font-size:clamp(38px, 5vw, 54px); } }
.oxalix-scope .page-head .lede { color:var(--dim) !important; margin-top:14px; font-size:15px; }
@media(min-width:640px){ .oxalix-scope .page-head .lede { font-size:16px; } }

.oxalix-scope footer { position:relative; border-top:1px solid var(--dark-line); padding:44px 0 26px; margin-top:32px; background:var(--dark); color:var(--dim) !important; }
@media(min-width:900px){ .oxalix-scope footer { padding:60px 0 32px; margin-top:40px; } }
.oxalix-scope .f-grid { display:grid; gap:26px; grid-template-columns:1fr; text-align:left !important; }
.oxalix-scope .f-grid > div { text-align:left !important; }
@media(min-width:640px){ .oxalix-scope .f-grid { grid-template-columns:1fr 1fr; gap:30px; } }
@media(min-width:900px){ .oxalix-scope .f-grid { grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; } }
.oxalix-scope .f-grid h4 { font-size:14px; color:#fff !important; margin-bottom:14px; text-align:left !important; }
.oxalix-scope .f-grid p, .oxalix-scope .f-grid a { font-size:13.5px; color:var(--dim) !important; text-align:left !important; }
.oxalix-scope .f-grid ul li { margin-bottom:10px; text-align:left !important; }
.oxalix-scope .f-grid a { transition:color .3s; display:inline-block; min-height:24px; }
.oxalix-scope .f-grid a:hover { color:var(--glow) !important; }
.oxalix-scope .f-brand p { max-width:34ch; margin-top:13px; }
.oxalix-scope .f-contact li { display:flex; gap:11px; align-items:baseline; text-align:left !important; }
.oxalix-scope .f-contact i { color:var(--glow) !important; width:16px; text-align:center; flex:none; }
.oxalix-scope .f-base { margin-top:24px; padding-top:20px; border-top:1px solid var(--dark-line); display:flex; flex-direction:column; text-align:left !important; gap:10px; font-size:11.5px; color:var(--dim-2) !important; }
@media(min-width:640px){ .oxalix-scope .f-base { flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:26px; } }
.oxalix-scope .f-base a { color:var(--dim-2) !important; }
.oxalix-scope .f-base a:hover { color:var(--glow) !important; }

.oxalix-scope .fab-wa {
  display:none;
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(160deg,#25D366,#0D7C3D);
  align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(13,124,61,.55), 0 4px 10px rgba(0,0,0,.25);
  color:#fff !important; font-size:22px; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.oxalix-scope .fab-wa i { color:#fff !important; }
.oxalix-scope .fab-wa:hover { transform:translateY(-3px) scale(1.05); }
.oxalix-scope .fab-wa::before { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.55); animation:fabPulse 2.2s ease-out infinite; }
@keyframes fabPulse { 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(1.55);opacity:0;} }
@media(min-width:768px){ .oxalix-scope .fab-wa { display:flex; } }

.oxalix-scope .sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:79;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--dark-2); border-top:1px solid var(--dark-line);
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.oxalix-scope .sticky-cta a { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 8px; font-weight:700; font-size:14px; letter-spacing:.01em; color:#fff !important; min-height:52px; }
.oxalix-scope .sticky-cta a.call { background:rgba(255,255,255,.06); }
.oxalix-scope .sticky-cta a.wa { background:linear-gradient(120deg,#1FBF57,#0D7C3D); }
.oxalix-scope .sticky-cta a i { color:#fff !important; }
.oxalix-scope main { padding-bottom:64px; }
@media(min-width:768px){ .oxalix-scope .sticky-cta { display:none; } .oxalix-scope main { padding-bottom:0; } }

@media(prefers-reduced-motion:reduce){
  .oxalix-scope *, .oxalix-scope *::before, .oxalix-scope *::after { animation:none !important; transition-duration:.01ms !important; }
}