/* Nilkimtek — site identity + motion layer
 * Bespoke keyframes and identity marks that Elementor's native controls cannot
 * express. Structure/layout stays 100% native Elementor widgets; this file only
 * decorates classes those widgets carry. Every animation has a
 * prefers-reduced-motion fallback.
 */

:root{
  --nk-bg:#FBFEFD; --nk-surface:#FFFFFF; --nk-ink:#07211F;
  --nk-ink-soft:rgba(7,33,31,.66); --nk-ink-faint:rgba(7,33,31,.45);
  --nk-teal:#0F6B63; --nk-teal-deep:#0A3A37; --nk-teal-bright:#1AA79B;
  --nk-glow:#5EEAD4; --nk-amber:#D9A441; --nk-amber-deep:#B9832A;
  --nk-mist:#EAF6F4; --nk-line:rgba(7,33,31,.13);
  --nk-shadow:0 18px 40px -22px rgba(7,33,31,.35);
}

/* ---------- Eyebrow: the signature mono label with amber dash ---------- */
.nk-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nk-teal);
}
.nk-eyebrow::before{
  content:""; width:16px; height:2px; background:var(--nk-amber);
  display:inline-block; flex:0 0 16px;
}
.nk-eyebrow.nk-on-dark{ color:var(--nk-glow); }
/* Elementor wraps every widget in a full-width div; these marks must hug their
   content instead of stretching across the flex column. */
.nk-eyebrow{ align-self:flex-start; width:auto !important; }
.nk-eyebrow .elementor-heading-title{ font:inherit; letter-spacing:inherit; color:inherit; }

/* ---------- Badge pills ---------- */
.nk-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.nk-badges .nk-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono",monospace; font-size:.71rem; letter-spacing:.03em;
  padding:7px 12px; border-radius:999px;
  background:var(--nk-mist); color:var(--nk-teal-deep);
  border:1px solid rgba(15,107,99,.14);
}
.nk-badges .nk-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--nk-teal-bright); flex:0 0 6px;
}
.nk-badges .nk-badge{ flex:0 0 auto; width:auto !important; }
.nk-badges .nk-badge .elementor-heading-title{ font:inherit; letter-spacing:inherit; color:inherit; }
.nk-on-dark-badges .nk-badge{
  background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.16);
}
.nk-on-dark-badges .nk-badge::before{ background:var(--nk-glow); }

/* ---------- Top indicator strip: slow hue drift ---------- */
.nk-indicator-strip{
  height:4px; width:100%;
  background:linear-gradient(90deg,var(--nk-teal),var(--nk-glow),var(--nk-amber),var(--nk-teal-bright),var(--nk-teal));
  background-size:300% 100%;
  animation:nkHueDrift 9s ease-in-out infinite;
}
@keyframes nkHueDrift{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* ---------- Hero orb: morphing conic blob + counter-rotating rings ---------- */
/* The orb column is a normal Elementor container; --orb is the square stage the
   blob and rings are centred in, so their size never depends on column width. */
.nk-orb{ position:relative; --orb:min(380px,72vw); }
.nk-orb > *{ pointer-events:none; }
.nk-orb .nk-orb-blob,
.nk-orb .nk-orb-ring{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
}
.nk-orb .nk-orb-blob{
  width:calc(var(--orb) * .70) !important;
  height:calc(var(--orb) * .70) !important;
  min-height:0 !important;
  background:conic-gradient(from 180deg at 50% 50%, #0F6B63, #1AA79B, #5EEAD4, #D9A441, #0F6B63);
  opacity:.92;
  box-shadow:0 30px 70px -22px rgba(10,58,55,.5);
  animation:nkBlobMorph 11s ease-in-out infinite, nkBlobSpin 26s linear infinite;
}
.nk-orb .nk-orb-blob::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
}
@keyframes nkBlobMorph{
  0%,100%{border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;}
  25%{border-radius:58% 42% 35% 65% / 60% 55% 45% 40%;}
  50%{border-radius:65% 35% 45% 55% / 40% 65% 35% 60%;}
  75%{border-radius:35% 65% 55% 45% / 55% 35% 65% 40%;}
}
@keyframes nkBlobSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* Rings: three concentric dashed circles, counter-rotating. Each ring carries an
   orbiting dot as its ::after, so rotating the ring orbits the dot. */
.nk-orb .nk-orb-ring{
  border-radius:50%; pointer-events:none; min-height:0 !important;
}
.nk-orb .nk-orb-ring::after{
  content:""; position:absolute; top:-5px; left:50%; margin-left:-5px;
  width:10px; height:10px; border-radius:50%;
}
.nk-orb .nk-orb-ring.r1{
  width:var(--orb) !important; height:var(--orb) !important;
  border:1px solid rgba(15,107,99,.22);
  animation:nkRingSpin 55s linear infinite;
}
.nk-orb .nk-orb-ring.r1::after{ background:var(--nk-glow); }
.nk-orb .nk-orb-ring.r2{
  width:calc(var(--orb) * .84) !important; height:calc(var(--orb) * .84) !important;
  border:1px dashed rgba(26,167,155,.75);
  animation:nkRingSpinRev 40s linear infinite;
}
.nk-orb .nk-orb-ring.r2::after{ background:var(--nk-amber); width:9px; height:9px; margin-left:-4.5px; top:-4.5px; }
.nk-orb .nk-orb-ring.r3{
  width:calc(var(--orb) * .62) !important; height:calc(var(--orb) * .62) !important;
  border:1px dashed rgba(217,164,65,.6);
  animation:nkRingSpin 30s linear infinite;
}
.nk-orb .nk-orb-ring.r3::after{ background:var(--nk-teal); width:8px; height:8px; margin-left:-4px; top:-4px; }
@keyframes nkRingSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes nkRingSpinRev{ from{transform:rotate(360deg);} to{transform:rotate(0deg);} }

/* ---------- Stat rows ---------- */
.nk-stat-list{ border-top:1px solid var(--nk-line); }
.nk-stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--nk-line); gap:20px;
}
.nk-stat-row .nk-val{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.3rem;
  color:var(--nk-teal); line-height:1.1;
}
.nk-stat-row .nk-label{
  font-size:.86rem; color:var(--nk-ink-faint); text-align:right; max-width:60%;
}

/* ---------- Category photo cards: hover lift + light sweep ---------- */
.nk-cat-card{ position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.nk-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--nk-shadow); }
.nk-cat-card::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .65s ease; pointer-events:none; z-index:2;
}
.nk-cat-card:hover::after{ left:130%; }
.nk-cat-card .elementor-widget-image img{
  width:100%; height:190px; object-fit:cover; display:block; border-radius:0;
}
/* Declared on-palette placeholder for categories without a photo yet */
.nk-cat-media-placeholder{
  height:190px;
  background:
    radial-gradient(120px circle at 30% 30%, rgba(94,234,212,.35), transparent 70%),
    linear-gradient(135deg,#EAF6F4,#CFE8E4);
  position:relative;
}
.nk-cat-media-placeholder::after{
  content:""; position:absolute; left:50%; top:50%; width:54px; height:54px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px dashed rgba(15,107,99,.45);
}
.nk-cat-card .nk-more{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--nk-teal);
  display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease;
}
.nk-cat-card:hover .nk-more{ gap:9px; }

/* ---------- Logo neon pulse ---------- */
.nk-logo-mark img{ animation:nkNeonPulse 4.5s ease-in-out infinite; will-change:filter; }
@keyframes nkNeonPulse{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(94,234,212,0)) drop-shadow(0 0 0 rgba(26,167,155,0)); }
  50%{ filter:drop-shadow(0 0 7px rgba(94,234,212,.6)) drop-shadow(0 0 16px rgba(26,167,155,.4)); }
}

/* ---------- Left-edge social rail (Elementor button widgets) ----------
   Each rail item is a native Elementor button (icon + label in one anchor),
   so its icon, label, link and colours stay editable in the editor. This block
   only supplies the half-pill shape and the hover expansion. */
.nk-social-rail{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:75;
  width:auto !important; max-width:none; padding:14px 0;
}
.nk-social-rail .elementor-widget{ width:auto; }
.nk-social-rail .elementor-widget-container,
.nk-social-rail .elementor-button-wrapper{ line-height:0; }
.nk-social-rail .elementor-button{
  position:relative;
  display:flex; align-items:center; justify-content:flex-start;
  width:46px; height:46px; padding:0; margin-left:-17px; overflow:hidden;
  border-radius:0 50% 50% 0; color:#fff;
  background:linear-gradient(145deg,var(--nk-teal),var(--nk-teal-deep));
  box-shadow:0 8px 22px -12px rgba(10,58,55,.6);
  transition:width .35s cubic-bezier(.22,1,.36,1), border-radius .35s ease,
             transform .35s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.nk-social-rail .elementor-button-content-wrapper{
  display:flex; flex-wrap:nowrap; align-items:center; gap:0;
}
.nk-social-rail .elementor-button-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; min-width:46px; height:46px; font-size:19px;
}
.nk-social-rail .elementor-button-text{
  white-space:nowrap; opacity:0; padding-inline-end:14px;
  transition:opacity .3s ease;
}
.nk-social-rail .elementor-button:hover{
  width:150px; border-radius:0 26px 26px 0; transform:translateX(4px);
  box-shadow:0 14px 30px -12px rgba(10,58,55,.7);
}
.nk-social-rail .elementor-button:hover .elementor-button-text{ opacity:1; }
.nk-social-rail .sr-instagram .elementor-button:hover{ background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af 80%,#515bd4); }
.nk-social-rail .sr-telegram .elementor-button:hover{ background:linear-gradient(145deg,#2AABEE,#229ED9); }
.nk-social-rail .sr-phone .elementor-button:hover{ background:linear-gradient(145deg,#1AA79B,#137970); }
.nk-social-rail .sr-linkedin .elementor-button:hover{ background:linear-gradient(145deg,#0A66C2,#004182); }
.nk-social-rail .elementor-widget:first-child .elementor-button::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--nk-glow); opacity:0;
  animation:nkSrPulse 3s ease-out infinite; pointer-events:none;
}
@keyframes nkSrPulse{
  0%{opacity:0;transform:scale(.92);} 50%{opacity:.45;} 100%{opacity:0;transform:scale(1.18);}
}
@media (max-width:780px){ .nk-social-rail{ display:none; } }

/* ---------- RTL mirroring ---------- */
[dir="rtl"] .nk-social-rail{ left:auto; right:0; }
[dir="rtl"] .nk-social-rail .elementor-button{ margin-left:0; margin-right:-17px; border-radius:50% 0 0 50%; }
[dir="rtl"] .nk-social-rail .elementor-button:hover{ border-radius:26px 0 0 26px; transform:translateX(-4px); }
[dir="rtl"] .nk-social-rail .elementor-button-text{ padding-inline-end:14px; }
[dir="rtl"] .nk-stat-row .nk-label{ text-align:left; }
[dir="rtl"] .nk-cat-card .nk-more svg{ transform:scaleX(-1); }

/* Arabic typography: body swaps face, tracking drops on mono labels */
html[lang="ar"] body,
html[lang="ar-AR"] body{ font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif; }
html[lang^="ar"] .nk-eyebrow,
html[lang^="ar"] .nk-badges .nk-badge{ letter-spacing:0; }
html[lang^="ar"] h1, html[lang^="ar"] h2,
html[lang^="ar"] h3, html[lang^="ar"] h4{
  font-family:"Space Grotesk","IBM Plex Sans Arabic",sans-serif;
}

/* ---------- Reduced motion: everything above collapses to static ---------- */
@media (prefers-reduced-motion: reduce){
  .nk-indicator-strip,
  .nk-orb .nk-orb-blob,
  .nk-orb .nk-orb-ring,
  .nk-logo-mark img,
  .nk-social-rail .elementor-button::after{
    animation:none !important;
  }
  .nk-orb .nk-orb-blob{ border-radius:48% 52% 60% 40% / 45% 45% 55% 55%; }
  .nk-cat-card::after{ display:none; }
  .nk-cat-card, .nk-social-rail .elementor-button{ transition:none; }
}

/* =========================================================================
 * SITE CHROME - header & footer (Xpro Theme Builder templates)
 * Only what Elementor's controls cannot express: sticky behaviour, the
 * scroll-driven progress bar, the mega-menu grid, the language pills and the
 * logged-in/out swap. Every colour, size and typography above these is set on
 * the widgets themselves and stays editable in Elementor.
 * ====================================================================== */

/* ---------- Sticky header shell ----------
   The sticky element has to be the outer <header>: a sticky child can only
   travel inside its parent's box, and the inner nav wrapper is exactly as tall
   as the header itself, so it would scroll straight off. */
header.xpro-theme-builder-header{ position:sticky; top:0; z-index:60; }
.admin-bar header.xpro-theme-builder-header{ top:32px; }
@media (max-width:782px){
  .admin-bar header.xpro-theme-builder-header{ top:46px; }
}
/* Frosted glass only on desktop: a backdrop-filter creates a containing block
   that would trap the off-canvas mobile panel (position:fixed) inside it. */
@media (min-width:1025px){
  .nk-header{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}

/* ---------- Scroll progress bar (CSS scroll-driven, no JS) ---------- */
.nk-progress{ pointer-events:none; }
.nk-progress-bar{ transform:scaleX(0); transform-origin:0 50%; }
[dir="rtl"] .nk-progress-bar{ transform-origin:100% 50%; }
@supports (animation-timeline: scroll()){
  .nk-progress-bar{
    animation:nkScrollProgress linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes nkScrollProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- Language selector (custom dropdown, [nilkimtek_lang_switcher]) ---------- */
.nk-langslot .elementor-widget-container{ display:flex; }
.nk-langsel{ position:relative; }
.nk-langsel-trigger{
  display:inline-flex; align-items:center; gap:7px;
  margin:0; padding:6px 10px 6px 12px; cursor:pointer;
  border:1px solid var(--nk-line); border-radius:999px;
  background:var(--nk-surface); color:var(--nk-ink-soft);
  font-family:"IBM Plex Sans",sans-serif; line-height:1.35;
  transition:border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nk-langsel-trigger:hover,
.nk-langsel.is-open .nk-langsel-trigger{
  border-color:var(--nk-teal); color:var(--nk-teal);
  box-shadow:0 0 0 3px rgba(15,107,99,.09);
}
.nk-langsel-code{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--nk-teal); font-weight:500;
}
.nk-langsel-name{ font-size:.78rem; }
.nk-langsel-caret{
  width:9px; height:auto; flex:none; opacity:.6;
  transition:transform .2s ease;
}
.nk-langsel.is-open .nk-langsel-caret{ transform:rotate(180deg); }

.nk-langsel-panel{
  position:absolute; z-index:60; top:calc(100% + 8px); inset-inline-end:0;
  min-width:158px; padding:5px;
  border:1px solid var(--nk-line); border-radius:14px;
  background:var(--nk-surface); box-shadow:var(--nk-shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nk-langsel.is-open .nk-langsel-panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
.nk-langsel-option{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:9px; text-decoration:none;
  color:var(--nk-ink-soft); transition:background .15s ease, color .15s ease;
}
.nk-langsel-option + .nk-langsel-option{ margin-top:2px; }
.nk-langsel-option:hover{ background:var(--nk-mist); color:var(--nk-teal); }
.nk-langsel-option.is-current{ background:var(--nk-teal); }
.nk-langsel-option.is-current,
.nk-langsel-option.is-current .nk-langsel-code{ color:#fff; }
@media (max-width:767px){
  .nk-langsel-trigger{ padding:5px 8px 5px 10px; gap:5px; }
  .nk-langsel-name{ display:none; }
}

/* ---------- Auth slot: one button for guests, one for members ---------- */
body:not(.logged-in) .nk-auth-in,
body.logged-in .nk-auth-out{ display:none; }

/* ---------- Products mega menu (desktop) ---------- */
@media (min-width:1025px){
  .nk-primary-nav .nk-mega-parent > .xpro-elementor-dropdown-menu{
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    background:var(--nk-surface); padding:14px; border-radius:16px;
  }
  .nk-primary-nav .nk-mega-parent > .xpro-elementor-dropdown-menu > li > a{
    border-radius:9px;
  }
  .nk-primary-nav .nk-mega-item > a::before{
    content:""; width:8px; height:8px; flex:0 0 8px; border-radius:50%;
    margin-inline-end:10px; background:var(--nk-teal-bright);
    box-shadow:0 0 0 3px rgba(26,167,155,.14);
  }
  .nk-primary-nav .nk-c-solvent-inks > a::before{ background:#1AA79B; }
  .nk-primary-nav .nk-c-water-inks > a::before{ background:#5EEAD4; }
  .nk-primary-nav .nk-c-lamination-adhesives > a::before{ background:#0F6B63; }
  .nk-primary-nav .nk-c-offset-inks > a::before{ background:#D9A441; }
  .nk-primary-nav .nk-c-heat-seal-lacquers > a::before{ background:#1AA79B; }
  .nk-primary-nav .nk-c-cold-seal-adhesives > a::before{ background:#5EEAD4; }
  .nk-primary-nav .nk-c-corrugated-glue > a::before{ background:#0F6B63; }
  .nk-primary-nav .nk-c-textile-inks > a::before{ background:#D9A441; }
  .nk-primary-nav .nk-mega-all{ grid-column:1 / -1; }
  .nk-primary-nav .nk-mega-all > a{
    justify-content:center; margin-top:6px; padding-top:12px;
    border-top:1px solid var(--nk-line); border-radius:0;
    font-family:"IBM Plex Mono",monospace; font-size:.72rem;
    letter-spacing:.08em; text-transform:uppercase;
  }
}
/* Mobile panel: the same items read as a plain indented list. */
@media (max-width:1024px){
  .nk-primary-nav .nk-mega-item > a,
  .nk-primary-nav .nk-mega-all > a{ padding-inline-start:16px; }
}

/* ---------- Footer sitemap: the same WP menu, stacked ---------- */
.nk-footer-nav .xpro-elementor-horizontal-navbar-wrapper{ width:100%; }
.nk-footer-nav .xpro-elementor-horizontal-navbar-nav{
  flex-direction:column; align-items:flex-start; gap:11px;
}
.nk-footer-nav .xpro-elementor-horizontal-navbar-nav > li{ width:100%; }
.nk-footer-nav .xpro-elementor-horizontal-navbar-nav > li > a{
  margin:0; min-width:0; justify-content:flex-start; line-height:1.4;
}

/* ---------- Footer plate ---------- */
.nk-foot-tag p:last-child,
.nk-foot-rights p:last-child{ margin-bottom:0; }
.nk-foot-contact .elementor-icon-list-icon:empty{ display:none; }

/* ---------- Reduced motion for the chrome ---------- */
@media (prefers-reduced-motion: reduce){
  .nk-progress-bar{ animation:none !important; transform:scaleX(0); }
  .nk-social-rail .elementor-button{ transition:none; }
}

/* Auth buttons never wrap, even on the tightest phone. */
.nk-actions .elementor-button{ white-space:nowrap; }
.nk-actions .elementor-widget{ flex:0 0 auto; }

/* Phone header: tighter language pills, icon-only auth button. */
@media (max-width:767px){
  .nk-langsel-trigger{ padding:5px 7px 5px 9px; }
  .nk-actions .nk-auth-compact .elementor-button-icon{ margin:0; }
  .nk-actions .nk-auth-compact .elementor-button-text{ display:none; }
}

/* =========================================================================
 * PAGE COMPONENTS - styles for markup that PHP produces, not Elementor
 * (request gadget, verification form, account request list, User
 * Registration login/signup forms). Everything Elementor can express is set
 * on the widgets themselves, not here.
 * ====================================================================== */

/* ---------- Buttons used inside shortcode output ---------- */
.gated-box .btn,
.nilkimtek-verify-wrap .btn,
.nk-shortcode .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:8px; border:1px solid transparent;
  font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:.88rem;
  line-height:1.2; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease,
             border-color .15s ease, color .15s ease;
}
.gated-box .btn-primary,
.nilkimtek-verify-wrap .btn-primary,
.nk-shortcode .btn-primary{
  background:var(--nk-teal); color:#fff;
  box-shadow:0 10px 22px -10px rgba(15,107,99,.55);
}
.gated-box .btn-primary:hover,
.nilkimtek-verify-wrap .btn-primary:hover,
.nk-shortcode .btn-primary:hover{
  transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(15,107,99,.6);
  color:#fff;
}
.gated-box .btn-ghost,
.nilkimtek-verify-wrap .btn-ghost,
.nk-shortcode .btn-ghost{ border-color:var(--nk-line); color:var(--nk-ink); background:transparent; }
.gated-box .btn-ghost:hover,
.nilkimtek-verify-wrap .btn-ghost:hover,
.nk-shortcode .btn-ghost:hover{ border-color:var(--nk-teal); color:var(--nk-teal); }
.gated-box .btn-sm,
.nilkimtek-verify-wrap .btn-sm,
.nk-shortcode .btn-sm{ padding:8px 14px; font-size:.8rem; }
.gated-box .btn-block,
.nilkimtek-verify-wrap .btn-block,
.nk-shortcode .btn-block{ width:100%; }
.gated-box .btn[disabled],
.nilkimtek-verify-wrap .btn[disabled]{ opacity:.6; pointer-events:none; }

/* ---------- Form fields inside shortcode output ---------- */
.gated-box .form-row,
.nk-shortcode .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.gated-box .field,
.nk-shortcode .field{ display:flex; flex-direction:column; gap:6px; }
.gated-box .field.full,
.nk-shortcode .field.full{ grid-column:1 / -1; }
.gated-box .field label,
.nk-shortcode .field label{ font-size:.82rem; font-weight:600; color:var(--nk-ink); }
.gated-box .field input,
.gated-box .field select,
.gated-box .field textarea,
.nk-shortcode .field input,
.nk-shortcode .field select,
.nk-shortcode .field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--nk-line); border-radius:8px;
  background:var(--nk-bg); font-family:inherit; font-size:.92rem; color:var(--nk-ink);
}
.gated-box .field input:focus,
.gated-box .field select:focus,
.gated-box .field textarea:focus,
.nk-shortcode .field input:focus,
.nk-shortcode .field textarea:focus{
  outline:2px solid var(--nk-teal-bright); outline-offset:1px; border-color:transparent;
}
.gated-box .field textarea,
.nk-shortcode .field textarea{ resize:vertical; min-height:110px; }
.error-text{ color:#B33A3A; font-size:.78rem; min-height:1em; margin:0 0 10px; }
@media (max-width:560px){
  .gated-box .form-row,
  .nk-shortcode .form-row{ grid-template-columns:1fr; }
}

/* ---------- The product request gadget ---------- */
.gated-box{
  border:1px dashed rgba(15,107,99,.4); background:var(--nk-mist);
  border-radius:14px; padding:22px 24px;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
}
.gated-box.unlocked{ border-style:solid; border-color:var(--nk-teal-bright); background:var(--nk-surface); }
.gated-box p{ font-size:.9rem; color:var(--nk-ink-soft); line-height:1.55; margin:0; }
.gated-box form{ width:100%; }

/* Locked state: the copy now runs to two or three lines, so the buttons wrap
   onto their own row. Without this they would sit at opposite edges (the box's
   space-between), which reads as two unrelated actions instead of one path. */
.gated-box[data-state="locked"]{ justify-content:flex-start; }
.gated-box[data-state="locked"] > div:first-child{ flex:1 1 100%; }

/* The locked box closes on what the form actually does, so "locked" reads as
   "one form waiting for you", not "the product data is hidden". */
.gated-box .gate-form-items{
  margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(15,107,99,.18);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.04em; color:var(--nk-teal);
}

/* ---------- Verification form ---------- */
.nilkimtek-verify-wrap{ display:flex; flex-direction:column; gap:14px; }
.nilkimtek-code-input{
  width:100%; text-align:center; letter-spacing:.5em; text-indent:.5em;
  font-family:"IBM Plex Mono",monospace; font-size:1.6rem; padding:14px 12px;
  border:1px solid var(--nk-line); border-radius:10px; background:var(--nk-bg);
  color:var(--nk-teal-deep);
}
.nilkimtek-code-input:focus{ outline:2px solid var(--nk-teal-bright); outline-offset:1px; border-color:transparent; }
.nilkimtek-resend-form{ text-align:center; }
.nilkimtek-verify-expired{
  border:1px dashed rgba(15,107,99,.4); background:var(--nk-mist);
  border-radius:14px; padding:20px 22px; color:var(--nk-ink-soft); font-size:.9rem;
}

/* ---------- Verification: outcome message, label, recovery field ---------- */
/* The page used to redraw an empty box on a wrong or expired code and say
   nothing at all; every POST outcome now renders here. */
.nilkimtek-verify-notice{
  margin:0; padding:11px 14px; border-radius:10px; border:1px solid transparent;
  font-size:.86rem; line-height:1.5;
}
.nilkimtek-verify-notice.is-ok{ background:var(--nk-mist); border-color:var(--nk-teal-bright); color:var(--nk-teal-deep); }
/* Amber and the error red stay on the border/fill; the text itself is the ink
   token, so the notice keeps brand colour without dropping below contrast. */
.nilkimtek-verify-notice.is-warn{ background:rgba(217,164,65,.12); border-color:var(--nk-amber-deep); color:var(--nk-ink); }
.nilkimtek-verify-notice.is-error{ background:rgba(179,58,58,.08); border-color:rgba(179,58,58,.4); color:#B33A3A; }

.nilkimtek-verify-label{
  display:block; font-size:.82rem; font-weight:600; color:var(--nk-ink);
  margin-bottom:8px; text-align:center;
}
.nilkimtek-verify-note{
  margin:0; font-size:.88rem; line-height:1.6; color:var(--nk-ink-soft);
}

/* The recovery field reuses the code input's box but must not inherit its
   6-digit treatment -- an e-mail address in 1.6rem mono at .5em tracking is
   unreadable and overflows the card. */
.nilkimtek-email-input{
  font-family:"IBM Plex Sans",sans-serif !important; font-size:.95rem !important;
  letter-spacing:normal !important; text-indent:0 !important; text-align:start !important;
  padding:12px 14px !important; color:var(--nk-ink) !important;
}

/* ---------- Password rule: hint + strength meter (User Registration) ---------- */
/* The rule itself is deliberately lenient -- at least 5 characters with one
   capital -- and is configured on form 11, not here. These are only its looks. */
.nk-shortcode .user-registration-password-hint,
.nk-shortcode .user-registration-password-strength,
.nk-auth-passrule{
  display:block; font-size:.8rem; line-height:1.5;
}
.nk-shortcode .user-registration-password-hint{
  margin:6px 0 2px; color:var(--nk-ink-soft);
}
.nk-shortcode .user-registration-password-strength{
  margin:8px 0 0; padding:7px 11px; border-radius:8px; font-weight:600;
  border:1px solid var(--nk-line); background:var(--nk-mist); color:var(--nk-ink-soft);
}
.nk-shortcode .user-registration-password-strength.short,
.nk-shortcode .user-registration-password-strength.bad{
  border-color:rgba(179,58,58,.4); background:rgba(179,58,58,.08); color:#B33A3A;
}
.nk-shortcode .user-registration-password-strength.good{
  border-color:var(--nk-amber-deep); background:rgba(217,164,65,.12); color:var(--nk-ink);
}
.nk-shortcode .user-registration-password-strength.strong{
  border-color:var(--nk-teal-bright); background:var(--nk-mist); color:var(--nk-teal-deep);
}
.nk-shortcode label.user-registration-error{
  display:block; margin-top:6px; color:#B33A3A; font-size:.8rem;
}

/* The password rule, restated on the login card. Elementor owns the copy --
   this only gives the note its recessed look. */
.nk-auth-passrule{
  margin-top:14px; padding:10px 13px; border-radius:10px;
  border:1px dashed rgba(15,107,99,.35); background:var(--nk-mist);
  color:var(--nk-ink-soft);
}
.nk-auth-passrule p{ margin:0; }
/* ---------- Account: request history + benefit rows ---------- */
.benefit-list{ display:flex; flex-direction:column; gap:14px; }
.benefit-item{ display:flex; gap:12px; align-items:flex-start; }
.benefit-item .bicon{
  width:30px; height:30px; border-radius:8px; background:var(--nk-mist);
  color:var(--nk-teal); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}
.benefit-item .bicon:empty::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--nk-teal-bright);
}
.benefit-item .bt{ font-size:.92rem; font-weight:600; color:var(--nk-ink); }
.benefit-item .bd{ font-size:.83rem; color:var(--nk-ink-soft); margin-top:2px; line-height:1.5; }
.empty-state{ text-align:center; padding:26px 10px; color:var(--nk-ink-faint); font-size:.88rem; }

/* ---------- User Registration plugin forms (login / sign-up) ---------- */
.nk-shortcode .ur-frontend-form{ border:none; padding:0; margin:0; background:transparent; }
.nk-shortcode .ur-frontend-form .ur-form-row{ margin:0; }
.nk-shortcode .ur-form-row .ur-form-grid{ padding:0; }
.nk-shortcode .ur-frontend-form label,
.nk-shortcode .ur-frontend-form .ur-label{
  font-size:.82rem !important; font-weight:600 !important; color:var(--nk-ink) !important;
  margin-bottom:6px !important;
}
.nk-shortcode .ur-frontend-form input[type="text"],
.nk-shortcode .ur-frontend-form input[type="email"],
.nk-shortcode .ur-frontend-form input[type="tel"],
.nk-shortcode .ur-frontend-form input[type="password"],
.nk-shortcode .ur-frontend-form select,
.nk-shortcode .ur-frontend-form textarea{
  width:100%; padding:11px 13px; border:1px solid var(--nk-line); border-radius:8px;
  background:var(--nk-bg); font-family:inherit; font-size:.92rem; color:var(--nk-ink);
  box-shadow:none;
}
.nk-shortcode .ur-frontend-form input:focus,
.nk-shortcode .ur-frontend-form select:focus,
.nk-shortcode .ur-frontend-form textarea:focus{
  outline:2px solid var(--nk-teal-bright); outline-offset:1px; border-color:transparent;
}
.nk-shortcode .ur-frontend-form button[type="submit"],
.nk-shortcode .ur-frontend-form .ur-submit-button,
.nk-shortcode #ur-submit-button{
  width:100%; padding:12px 20px; border:none; border-radius:8px;
  background:var(--nk-teal); color:#fff; font-family:"IBM Plex Sans",sans-serif;
  font-weight:600; font-size:.9rem; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(15,107,99,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nk-shortcode .ur-frontend-form button[type="submit"]:hover,
.nk-shortcode #ur-submit-button:hover{ transform:translateY(-1px); }
.nk-shortcode .user-registration-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.nk-shortcode .user-registration-error,
.nk-shortcode .user-registration-message,
.nk-shortcode .user-registration-info{
  border-radius:10px; border:1px solid var(--nk-line); background:var(--nk-mist);
  padding:12px 14px; font-size:.86rem; margin-bottom:14px; list-style:none;
}

/* ---------- Timeline (about page) ---------- */
.nk-timeline{ border-inline-start:2px solid var(--nk-line); }
.nk-tl-item{ position:relative; }
.nk-tl-item::before{
  content:""; position:absolute; inset-inline-start:-7px; top:4px;
  width:10px; height:10px; border-radius:50%; background:var(--nk-teal-bright);
  box-shadow:0 0 0 4px rgba(26,167,155,.15);
}

/* ---------- Breadcrumb ---------- */
.nk-crumb{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--nk-ink-faint); }
.nk-crumb a{ color:inherit; text-decoration:none; }
.nk-crumb a:hover{ color:var(--nk-teal); }

/* ---------- WPForms contact form skin ---------- */
.nk-contact-form .wpforms-field{ padding:0 0 16px; }
.nk-contact-form .wpforms-field-label{
  font-size:.82rem !important; font-weight:600 !important; color:var(--nk-ink) !important;
}
.nk-contact-form input[type="text"],
.nk-contact-form input[type="email"],
.nk-contact-form input[type="tel"],
.nk-contact-form select,
.nk-contact-form textarea{
  width:100% !important; max-width:100% !important;
  padding:11px 13px !important; border:1px solid var(--nk-line) !important;
  border-radius:8px !important; background:var(--nk-bg) !important;
  font-family:inherit !important; font-size:.92rem !important; color:var(--nk-ink) !important;
  box-shadow:none !important;
}
.nk-contact-form textarea{ min-height:130px !important; resize:vertical; }
.nk-contact-form input:focus,
.nk-contact-form select:focus,
.nk-contact-form textarea:focus{
  outline:2px solid var(--nk-teal-bright) !important; outline-offset:1px;
  border-color:transparent !important;
}
.nk-contact-form .wpforms-submit{
  padding:12px 24px !important; border:none !important; border-radius:8px !important;
  background:var(--nk-teal) !important; color:#fff !important;
  font-family:"IBM Plex Sans",sans-serif !important; font-weight:600 !important;
  font-size:.9rem !important; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(15,107,99,.55);
  transition:transform .15s ease;
}
.nk-contact-form .wpforms-submit:hover{ transform:translateY(-1px); }
.nk-contact-form .wpforms-confirmation-container-full{
  background:var(--nk-mist) !important; border:1px solid var(--nk-teal-bright) !important;
  border-radius:14px; padding:22px 24px; color:var(--nk-teal-deep);
}
.nk-contact-form .wpforms-error{ color:#B33A3A !important; font-size:.78rem !important; }

/* ---------- Account profile card (shortcode output) ---------- */
.nk-profile{ text-align:center; }
.nk-avatar{ width:64px; height:64px; border-radius:50%; background:var(--nk-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.3rem; margin:0 auto 14px; }
.nk-profile-name{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.05rem; color:var(--nk-ink); }
.nk-profile-role{ font-size:.8rem; color:var(--nk-ink-faint); margin-top:4px; }
.nk-profile-rows{ text-align:start; margin-top:22px; border-top:1px solid var(--nk-line); padding-top:18px; display:flex; flex-direction:column; gap:12px; }
.nk-profile-row{ display:flex; justify-content:space-between; gap:12px; font-size:.86rem; }
.nk-profile-row .k{ color:var(--nk-ink-faint); flex:0 0 auto; }
.nk-profile-row .v{ text-align:end; word-break:break-word; }
.nk-profile .btn{ margin-top:22px; display:inline-flex; align-items:center; justify-content:center; width:100%; padding:11px 20px; border-radius:8px; border:1px solid var(--nk-line); color:var(--nk-ink); font-weight:600; font-size:.88rem; text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.nk-profile .btn:hover{ border-color:var(--nk-teal); color:var(--nk-teal); }

/* Category cards are whole-card links. */
a.nk-cat-card{ text-decoration:none; color:inherit; }
a.nk-cat-card:hover{ color:inherit; }

/* The plugin ships its own purple button; out-specify it once, here. */
.nk-shortcode .ur-frontend-form .ur-form-row .ur-form-grid .user-registration-Button,
.nk-shortcode .user-registration-Button.ur-submit-button,
.nk-shortcode button.user-registration-Button{
  background-color:var(--nk-teal); border-radius:8px; box-shadow:0 10px 22px -10px rgba(15,107,99,.55);
}
.nk-shortcode .ur-frontend-form .ur-form-row .ur-form-grid .user-registration-Button:hover,
.nk-shortcode .user-registration-Button.ur-submit-button:hover,
.nk-shortcode button.user-registration-Button:hover{
  background-color:var(--nk-teal-deep);
}
.nk-shortcode a{ color:var(--nk-teal); }

.nk-shortcode .ur-submit-button,
.nk-shortcode button.ur-submit-button,
.nk-shortcode .ur-frontend-form .ur-button-container button{
  background-color:var(--nk-teal) !important; color:#fff !important; border:none; border-radius:8px;
  padding:12px 22px; font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:.9rem;
  box-shadow:0 10px 22px -10px rgba(15,107,99,.55); cursor:pointer;
}
.nk-shortcode .ur-submit-button:hover,
.nk-shortcode button.ur-submit-button:hover{ background-color:var(--nk-teal-deep) !important; }

/* =====================================================================
   HERO — "Titration" motion
   ---------------------------------------------------------------------
   The headline fills upward behind a bright meniscus line, the way liquid
   rises in a graduated column, and settles once. Everything that keeps
   moving afterwards is ambient: a slow specular sheen across the type, a
   drifting molecular lattice, a chromatography wash, and the orb breathing.

   Nothing here touches Elementor's own controls. The title still takes its
   colour from the widget's Text Color (the sheen is built on currentColor),
   and every text, spacing and layout setting stays editable in the editor.
   Transform/opacity/background-position only — no layout thrash, no JS.
   ===================================================================== */

.nk-hero{ position:relative; overflow:hidden; isolation:isolate; }
/* Boxed containers render as .e-con > .e-con-inner, so this lifts the inner
   wrapper (and therefore all hero content) above the two ambient layers. */
.nk-hero > *{ position:relative; z-index:1; }

/* ---- ambient 1: molecular bond lattice, one drift every 90s ---- */
.nk-hero::before{
  content:""; position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at center, rgba(15,107,99,.17) 1.6px, transparent 1.7px),
    radial-gradient(circle at center, rgba(217,164,65,.15) 1.4px, transparent 1.5px),
    repeating-linear-gradient(60deg,  rgba(15,107,99,.045) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(-60deg, rgba(15,107,99,.045) 0 1px, transparent 1px 78px);
  background-size:68px 68px, 137px 137px, auto, auto;
  background-position:0 0, 34px 34px, 0 0, 0 0;
  animation:nkLatticeDrift 90s linear infinite;
}
@keyframes nkLatticeDrift{
  from{ background-position:0 0,      34px 34px,   0 0, 0 0; }
  to  { background-position:68px 136px, 171px 205px, 0 0, 0 0; }
}

/* ---- ambient 2: chromatography wash rising from the baseline ---- */
.nk-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:auto -20% -30% -20%; height:72%;
  background:
    radial-gradient(58% 100% at 24% 100%, rgba(94,234,212,.20), transparent 70%),
    radial-gradient(54% 100% at 74% 100%, rgba(217,164,65,.13), transparent 72%);
  filter:blur(8px);
  animation:nkChromaDrift 26s ease-in-out infinite alternate;
}
@keyframes nkChromaDrift{
  from{ transform:translate3d(-3%,0,0)   scaleY(1);    opacity:.8; }
  to  { transform:translate3d(3%,-4%,0)  scaleY(1.14); opacity:1; }
}

/* ---- the headline: liquid fill + meniscus ---- */
.nk-hero-title{ position:relative; }

@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  /* The mask is 2.6x the element's height; sliding it from top to bottom walks
     the opaque end of the gradient up through the text. Declared inside
     @supports so a browser without masking simply shows the finished title. */
  .nk-hero-title{
    -webkit-mask-image:linear-gradient(to top,#000 40%,rgba(0,0,0,.55) 52%,transparent 60%);
            mask-image:linear-gradient(to top,#000 40%,rgba(0,0,0,.55) 52%,transparent 60%);
    -webkit-mask-size:100% 260%;   mask-size:100% 260%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    /* RESTING STATE MUST BE FULLY REVEALED. `both` would pin the element to the
       animation's first frame - a closed mask, i.e. an invisible headline - on
       any browser that applies the CSS but never runs the mask animation. That
       shipped once and read as a large blank gap under the header on mobile.
       `backwards` applies the hidden frame only during the delay, then hands
       back to these declarations, so the worst case is a title that simply
       appears without animating. */
    -webkit-mask-position:0 100%;  mask-position:0 100%;
    animation:nkTitrationFill 1.5s cubic-bezier(.22,1,.36,1) .2s backwards;
  }
  @keyframes nkTitrationFill{
    from{ -webkit-mask-position:0 0%;   mask-position:0 0%; }
    to  { -webkit-mask-position:0 100%; mask-position:0 100%; }
  }

  /* Same rule as above: the resting state has to be the harmless one. Without
     `opacity:0` here, a browser that skips the animation leaves a glowing bar
     parked under the headline forever. */
  .nk-hero-title::after{
    content:""; position:absolute; left:-2%; width:104%; height:2px; top:100%;
    border-radius:2px; pointer-events:none; opacity:0;
    background:linear-gradient(90deg,transparent,var(--nk-teal-bright),var(--nk-glow),var(--nk-teal-bright),transparent);
    box-shadow:0 0 18px 2px rgba(94,234,212,.5);
    animation:nkMeniscus 1.5s cubic-bezier(.22,1,.36,1) .2s backwards;
  }
  @keyframes nkMeniscus{
    0%  { top:100%; opacity:0; transform:scaleX(.35); }
    12% { opacity:1; }
    82% { opacity:1; transform:scaleX(1); }
    100%{ top:-4%;  opacity:0; transform:scaleX(.7); }
  }
}

/* ---- the sheen loop: light travelling across the letterforms ----
   -webkit-text-fill-color (not color) is what goes transparent, so `color`
   survives and currentColor keeps returning the widget's own Text Color. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nk-hero-title .elementor-heading-title{
    background-image:linear-gradient(100deg,
      currentColor 0 44%,
      var(--nk-teal-bright) 50%,
      currentColor 56% 100%);
    background-size:280% 100%;
    background-repeat:no-repeat;
    background-position:100% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:nkTitleSheen 9s ease-in-out 2.1s infinite;
  }
  /* Stay strictly within 0%-100%. Outside that range a 280%-wide no-repeat
     background stops covering the element, and every glyph it misses is left
     unpainted - which silently erases part of the headline. */
  @keyframes nkTitleSheen{
    0%  { background-position:100% 0; }
    42% { background-position:0% 0; }
    100%{ background-position:0% 0; }
  }
}

/* ---- supporting copy settles in after the title ---- */
@keyframes nkHeroRise{
  from{ opacity:0; transform:translate3d(0,16px,0); }
  to  { opacity:1; transform:none; }
}
/* `backwards`, never `both`: the hidden first frame applies only during each
   delay. Anything that stops these animations running leaves the copy at its
   normal, visible resting state instead of stranding it at opacity 0. */
.nk-hero-eyebrow{ animation:nkHeroRise .8s cubic-bezier(.22,1,.36,1) .05s backwards; }
.nk-hero-lede   { animation:nkHeroRise .9s cubic-bezier(.22,1,.36,1) .95s backwards; }
.nk-hero-cta    { animation:nkHeroRise .9s cubic-bezier(.22,1,.36,1) 1.15s backwards; }

/* the amber dash draws itself out of nothing */
.nk-hero-eyebrow::before{ animation:nkDashDraw .7s cubic-bezier(.22,1,.36,1) .35s backwards; }
@keyframes nkDashDraw{ from{ width:0; opacity:0; } to{ width:16px; opacity:1; } }

.nk-hero-badges .nk-badge{ animation:nkHeroRise .7s cubic-bezier(.22,1,.36,1) backwards; }
.nk-hero-badges .nk-badge:nth-child(1){ animation-delay:1.35s; }
.nk-hero-badges .nk-badge:nth-child(2){ animation-delay:1.45s; }
.nk-hero-badges .nk-badge:nth-child(3){ animation-delay:1.55s; }
.nk-hero-badges .nk-badge:nth-child(4){ animation-delay:1.65s; }
/* the indicator dot keeps a slow reagent-like pulse */
.nk-hero-badges .nk-badge::before{ animation:nkBadgeDot 3.2s ease-in-out infinite; }
@keyframes nkBadgeDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(26,167,155,.45); }
  50%    { box-shadow:0 0 0 4px rgba(26,167,155,0); }
}

/* ---- primary CTA: a slow sheen sweep, brighter on hover ---- */
.nk-hero-cta > .elementor-widget-button:first-child .elementor-button{
  position:relative; overflow:hidden;
}
.nk-hero-cta > .elementor-widget-button:first-child .elementor-button::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);
  background-size:260% 100%; background-repeat:no-repeat;
  background-position:100% 0;
  animation:nkCtaSheen 6.5s ease-in-out 2.6s infinite;
}
@keyframes nkCtaSheen{
  0%  { background-position:100% 0; }
  35% { background-position:0% 0; }
  100%{ background-position:0% 0; }
}

/* ---- orb: a reaction pulse and a breathing halo ---- */
.nk-hero-orb::before{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--orb); height:var(--orb);
  margin:calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2);
  border-radius:50%; border:1px solid rgba(94,234,212,.5);
  pointer-events:none;
  animation:nkOrbPulse 5.5s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes nkOrbPulse{
  0%      { transform:scale(.6);  opacity:0; }
  14%     { opacity:.6; }
  70%,100%{ transform:scale(1.28); opacity:0; }
}
.nk-hero-orb::after{
  content:""; position:absolute; left:50%; top:50%; z-index:-1;
  width:calc(var(--orb) * 1.3); height:calc(var(--orb) * 1.3);
  margin:calc(var(--orb) * -0.65) 0 0 calc(var(--orb) * -0.65);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(94,234,212,.26),rgba(94,234,212,0) 68%);
  animation:nkOrbBreathe 7s ease-in-out infinite alternate;
}
@keyframes nkOrbBreathe{
  from{ transform:scale(.9);  opacity:.55; }
  to  { transform:scale(1.06); opacity:1; }
}

/* ---- accessibility: hand back a completely still hero ---- */
@media (prefers-reduced-motion: reduce){
  .nk-hero::before,
  .nk-hero::after,
  .nk-hero-title,
  .nk-hero-title .elementor-heading-title,
  .nk-hero-eyebrow,
  .nk-hero-eyebrow::before,
  .nk-hero-lede,
  .nk-hero-cta,
  .nk-hero-cta > .elementor-widget-button:first-child .elementor-button::after,
  .nk-hero-badges .nk-badge,
  .nk-hero-badges .nk-badge::before,
  .nk-hero-orb::before,
  .nk-hero-orb::after{ animation:none !important; }

  .nk-hero-title{ -webkit-mask-image:none !important; mask-image:none !important; }
  .nk-hero-title .elementor-heading-title{ -webkit-text-fill-color:currentColor !important; }
  .nk-hero-title::after{ display:none; }
  .nk-hero-eyebrow::before{ width:16px; opacity:1; }
}

/* =====================================================================
   iOS overscroll colour (the "white gap under the footer" on iPhone)
   ---------------------------------------------------------------------
   Touch browsers rubber-band past the end of the document. The strip that
   this reveals is painted with the CANVAS background, and because <html> had
   no background of its own the canvas inherited <body>'s near-white - so the
   dark teal footer looked like it was followed by a large empty white band.
   Reported on iPhone + Chrome; correct in a browser that does not bounce, and
   invisible on desktop, which is why every measurement showed a 0px gap.

   Giving <html> its own colour stops that propagation. Nothing on the page
   itself changes: <body> keeps its own opaque background across the full
   document height, so this is only ever seen outside the document's box.
   ===================================================================== */
html{ background-color:var(--nk-teal-deep); }

/* =====================================================================
   MOBILE MENU — "Lab Panel"
   ---------------------------------------------------------------------
   Restyles the Xpro off-canvas drawer into the site's own language: the
   footer's deep teal, the hero's molecular lattice, Space Grotesk items with
   mono index numbers, and a staggered entrance driven purely by the `.active`
   class Xpro already toggles on the wrapper. No JS and no markup changes —
   the links stay ordinary WordPress menu items, editable under
   Appearance > Menus, and the widget stays an Elementor widget.

   Everything is scoped to <=1024px, which is the only width where Xpro turns
   this list into a panel. The desktop mega menu (min-width:1025px) is
   untouched.
   ===================================================================== */
@media (max-width:1024px){

  /* ---- the panel ---- */
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper{
    width:min(86vw,370px) !important;
    display:flex; flex-direction:column;
    /* the widget carries `elementor-align-right`, which would otherwise drag
       the brand line and the chips over to the right edge inside the panel */
    text-align:start;
    padding:26px 24px calc(22px + env(safe-area-inset-bottom,0px));
    overflow-y:auto; overscroll-behavior:contain;
    background-color:var(--nk-teal-deep) !important;
    background-image:
      radial-gradient(circle at center, rgba(94,234,212,.14) 1.4px, transparent 1.5px),
      repeating-linear-gradient(60deg,  rgba(94,234,212,.05) 0 1px, transparent 1px 66px),
      repeating-linear-gradient(-60deg, rgba(94,234,212,.05) 0 1px, transparent 1px 66px),
      linear-gradient(165deg,#0A3A37 0%,#07211F 100%);
    background-size:58px 58px, auto, auto, auto;
    box-shadow:-28px 0 60px -30px rgba(7,33,31,.85);
  }

  /* ---- brand mark, standing in for the header logo ---- */
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper::before{
    content:"";
    display:block; flex:0 0 auto;
    height:30px; margin:2px 0 22px;
    background-image:url("https://nilkimtek.com/wp-content/uploads/2026/07/nilkimtek-logo-text-dark.png");
    background-repeat:no-repeat; background-position:left center;
    background-size:auto 30px;
  }

  /* ---- close button: a quiet outlined circle, not a black slab ---- */
  .nk-primary-nav .xpro-elementor-horizontal-menu-close{
    position:absolute; top:22px; inset-inline-end:20px;
    width:38px !important; height:38px !important;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(94,234,212,.32) !important;
    border-radius:50% !important;
    background:rgba(94,234,212,.06) !important;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .nk-primary-nav .xpro-elementor-horizontal-menu-close:hover{
    background:rgba(94,234,212,.14) !important;
    border-color:var(--nk-glow) !important;
    transform:rotate(90deg);
  }
  .nk-primary-nav .xpro-elementor-horizontal-menu-close svg{ width:15px; height:15px; }
  .nk-primary-nav .xpro-elementor-horizontal-menu-close svg path{ fill:var(--nk-glow); }

  /* ---- the list ---- */
  .nk-primary-nav .xpro-elementor-horizontal-navbar{ width:100%; }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav{
    counter-reset:nkmenu;
    width:100%; display:block;
  }
  /* The row itself is the flex line: number, link, then the submenu wrapping
     onto its own line. Keeping the counter on the <li> avoids Xpro's
     link pseudo-elements entirely (see the note below). */
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li{
    display:flex; flex-wrap:wrap; align-items:center; column-gap:14px;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li:last-child{ border-bottom:0; }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu{
    flex:0 0 100%;
  }

  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li > a{
    /* Xpro gives the link width:100%, which pushes the index number onto its
       own line. flex-basis 0 + min-width 0 + width auto keeps them on one row. */
    position:relative; flex:1 1 0; min-width:0; width:auto !important;
    display:flex !important; align-items:center;
    height:auto !important; padding:15px 2px !important;
    background:transparent !important;
    font-family:"Space Grotesk",sans-serif !important;
    font-size:1.28rem !important; font-weight:600; line-height:1.25;
    letter-spacing:-.01em;
    color:#FFFFFF !important;
    transition:color .2s ease, transform .2s ease;
  }
  /* The mono index: 01, 02, 03 ...
     NOTE: this must live on the <li>, never on `.xpro-elementor-nav-link`.
     That link's ::before IS Xpro's underlineFromCenter bar - forcing content
     into it puts the number underneath the item, centred, sitting on a
     coloured rule. Retire the underline instead; this design doesn't use it. */
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li::before{
    counter-increment:nkmenu;
    content:counter(nkmenu,decimal-leading-zero);
    flex:0 0 auto; align-self:center;
    font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:500;
    letter-spacing:.1em; color:var(--nk-glow); opacity:.55;
    transition:opacity .2s ease;
  }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li:hover::before,
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item::before{
    opacity:1;
  }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li > a::before{
    display:none !important;
  }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a{
    color:var(--nk-glow) !important; transform:translateX(4px);
  }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::before{ opacity:1; }

  /* Xpro's underline effect fights the layout here */
  .nk-primary-nav .xpro-elementor-horizontal-menu-style-underlineFromCenter
    .xpro-elementor-nav-link::after{ display:none !important; }

  /* ---- staggered entrance, driven by Xpro's own `.active` ---- */
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper.active::before,
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper.active > .xpro-elementor-horizontal-navbar > ul > li{
    animation:nkDrawerIn .5s cubic-bezier(.22,1,.36,1) backwards;
  }
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper.active::before{ animation-delay:.06s; }
  .nk-primary-nav .active > .xpro-elementor-horizontal-navbar > ul > li:nth-child(1){ animation-delay:.13s; }
  .nk-primary-nav .active > .xpro-elementor-horizontal-navbar > ul > li:nth-child(2){ animation-delay:.19s; }
  .nk-primary-nav .active > .xpro-elementor-horizontal-navbar > ul > li:nth-child(3){ animation-delay:.25s; }
  .nk-primary-nav .active > .xpro-elementor-horizontal-navbar > ul > li:nth-child(4){ animation-delay:.31s; }
  .nk-primary-nav .active > .xpro-elementor-horizontal-navbar > ul > li:nth-child(5){ animation-delay:.37s; }
  .nk-primary-nav .active > .xpro-elementor-horizontal-navbar > ul > li:nth-child(n+6){ animation-delay:.43s; }
  @keyframes nkDrawerIn{
    from{ opacity:0; transform:translateX(22px); }
    to  { opacity:1; transform:none; }
  }

  /* ---- products submenu: an indented reagent list ---- */
  .nk-primary-nav .nk-mega-parent > .xpro-elementor-dropdown-menu{
    margin:2px 0 12px; padding:6px 8px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
  }
  .nk-primary-nav .nk-mega-item > a,
  .nk-primary-nav .nk-mega-all > a{
    display:flex !important; align-items:center;
    padding:9px 10px !important; border-radius:8px;
    background:transparent !important;
    font-family:"IBM Plex Sans",sans-serif !important;
    font-size:.85rem !important; font-weight:400; line-height:1.35;
    color:rgba(255,255,255,.78) !important;
    transition:background .18s ease, color .18s ease;
  }
  .nk-primary-nav .nk-mega-item > a:hover,
  .nk-primary-nav .nk-mega-all > a:hover{
    background:rgba(94,234,212,.1) !important; color:#fff !important;
  }
  /* the category chips, same palette as the desktop mega menu */
  .nk-primary-nav .nk-mega-item > a::before{
    content:""; flex:0 0 7px; width:7px; height:7px; border-radius:50%;
    margin-inline-end:11px; background:var(--nk-teal-bright);
  }
  .nk-primary-nav .nk-c-solvent-inks > a::before        { background:#1AA79B; }
  .nk-primary-nav .nk-c-water-inks > a::before          { background:#5EEAD4; }
  .nk-primary-nav .nk-c-lamination-adhesives > a::before{ background:#0F6B63; }
  .nk-primary-nav .nk-c-offset-inks > a::before         { background:#D9A441; }
  .nk-primary-nav .nk-c-heat-seal-lacquers > a::before  { background:#1AA79B; }
  .nk-primary-nav .nk-c-cold-seal-adhesives > a::before { background:#5EEAD4; }
  .nk-primary-nav .nk-c-corrugated-glue > a::before     { background:#0F6B63; }
  .nk-primary-nav .nk-c-textile-inks > a::before        { background:#D9A441; }
  .nk-primary-nav .nk-mega-all > a{
    margin-top:4px; padding-top:11px !important;
    border-top:1px solid rgba(255,255,255,.09); border-radius:0;
    font-family:"IBM Plex Mono",monospace !important;
    font-size:.68rem !important; letter-spacing:.09em; text-transform:uppercase;
    color:var(--nk-glow) !important;
  }

  /* the dropdown chevron */
  .nk-primary-nav .xpro-dropdown-menu-toggle{ color:rgba(255,255,255,.55); }
  .nk-primary-nav .xpro-dropdown-menu-toggle svg{ fill:currentColor; }

  /* ---- signature line pinned to the bottom ---- */
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper::after{
    content:"NİLKİMTEK KİMYA SANAYİ";
    display:block; margin-top:auto; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.09);
    font-family:"IBM Plex Mono",monospace; font-size:.6rem;
    letter-spacing:.16em; text-transform:uppercase;
    color:rgba(255,255,255,.42);
  }

  /* ---- backdrop ---- */
  .nk-primary-nav .xpro-elementor-horizontal-menu-overlay{
    background:rgba(7,33,31,.55) !important;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }

  /* Arabic sets its own tracking elsewhere; keep the mono bits readable. */
  html[lang^="ar"] .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper::after,
  html[lang^="ar"] .nk-primary-nav .nk-mega-all > a{ letter-spacing:0; }
}

@media (max-width:1024px) and (prefers-reduced-motion: reduce){
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper.active::before,
  .nk-primary-nav .xpro-elementor-horizontal-navbar-wrapper.active > .xpro-elementor-horizontal-navbar > ul > li{
    animation:none !important;
  }
  .nk-primary-nav .xpro-elementor-horizontal-menu-close:hover{ transform:none; }
}

/* ---------- Application shot under "Nerede Kullanılır" ---------- */
.nk-app-shot{ overflow:hidden; }
.nk-app-shot-img img{
  display:block; margin:0 auto; width:100%; max-width:520px; height:auto;
  border:1px solid var(--nk-line); border-radius:14px;
}
.nk-app-shot-cap{
  max-width:56ch; margin:14px auto 0; font-size:.9rem; line-height:1.55;
}
@media (max-width:767px){
  .nk-app-shot-img img{ max-width:100%; border-radius:12px; }
  .nk-app-shot-cap{ margin-top:12px; font-size:.86rem; }
}

/* ---------- Login card: one register prompt, not two ---------- */
/* User Registration prints its own "not a member yet" link inside the form and
   the page already carries a designed one below it. The plugin's copy steps
   aside; its text is still translated in nilkimtek-i18n.php in case this rule
   is ever dropped. */
.user-registration-register{ display:none; }

/* ---------- Verification page: the recover view ---------- */
/* With no pending session the page renders the recover form, whose own copy
   already says the session expired. The static intro and the "didn't get the
   code" note contradict it, so they are hidden in that state only. */
body:has(.nilkimtek-verify-recover) .nk-auth-sub,
body:has(.nilkimtek-verify-recover) .nk-verify-help{ display:none; }

/* ---------- Certification strip (Elementor widget: Nilkimtek Certifications) ---------- */
/* Structure only. Everything worth changing - certificate height, colours,
   padding, gap, typography, speed, direction - is a control on the widget, so
   it is deliberately NOT repeated here. Putting a size or a colour in this file
   would give the strip two sources of truth and take it back out of the
   builder's hands, which is the whole reason it became a widget. */
.nk-certs{
  border-block-start:1px solid rgba(7,33,31,.13);
  border-block-end:1px solid rgba(7,33,31,.13);
  overflow:hidden;
}

/* Two identical rows side by side; the track slides exactly half its own width,
   which lands copy two where copy one began. A seamless loop out of a transform
   alone - nothing here animates layout. */
.nk-certs-track{
  display:flex;
  width:max-content;
  animation:nk-certs-slide 52s linear infinite;
}
.nk-certs-pausable:hover .nk-certs-track{ animation-play-state:paused; }

@keyframes nk-certs-slide{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

.nk-certs-row{
  display:flex;
  align-items:stretch;
  margin:0;
  padding:0;
  list-style:none;
}
.nk-cert{ margin:0; }

.nk-cert-card{
  display:flex;
  align-items:center;
  height:100%;
  border:1px solid rgba(7,33,31,.13);
}

.nk-cert-shot{
  display:block;
  width:auto;
  border-radius:8px;
  border:1px solid rgba(7,33,31,.13);
}

.nk-cert-name{ line-height:1.3; }

[dir="rtl"] .nk-certs-track{ animation-direction:reverse; }

/* Movement is a nicety; the content is not. With reduced motion the track stops
   and the strip becomes an ordinary horizontal scroller, and the duplicate row
   is dropped so nothing is announced twice. */
@media (prefers-reduced-motion: reduce){
  .nk-certs{ overflow-x:auto; }
  .nk-certs-track{ animation:none; width:auto; }
  .nk-certs-row + .nk-certs-row{ display:none; }
}

/* ---------- Focus product cards (three families, 2026-09-02) ----------
   The category grid went from eight cards to three. At three the cards carry
   the page on their own, so they gained a taller media ground, a mono eyebrow
   and application chips. Only structure lives here -- every size, colour and
   string on these cards is an Elementor control.

   The fit rules below are NOT optional styling: the older
   `.nk-cat-card .elementor-widget-image img` rule above forces height:190px /
   object-fit:cover, and it out-specifies Elementor's own per-widget CSS, so a
   product shot would be cropped through the middle without this. */
.nk-cat-media{
  display:flex; align-items:center; justify-content:center;

  /* Studio-white ground, on purpose. The product shots are opaque PNGs shot on
     white, so ANY tinted ground makes the photo read as a pale rectangle pasted
     onto the card -- and mix-blend-mode cannot rescue it, because the tint is
     darker than the photo's own background. White removes the seam outright and
     is the stronger treatment for product photography anyway; the mint identity
     is carried by the corner glow, the chips and the eyebrow. */
  /* Flat white, with no glow. A radial accent was tried here and had to go:
     wherever it fell behind the photo it re-created the same seam, because the
     photo's own white paints over it. */
  background:#FFFFFF;
  border-bottom:1px solid rgba(7,33,31,.08);
}

.nk-cat-media .elementor-widget-image{ width:auto; max-width:74%; }

.nk-cat-media .elementor-widget-image img{
  width:auto; height:auto; max-width:100%; max-height:200px;
  object-fit:contain; border-radius:0;

  /* The product shots are opaque PNGs on a near-white ground (measured: alpha
     255, corner rgb ~241), so they would sit on the mint gradient as a visible
     white rectangle. Multiply folds that ground into the gradient instead of
     painting over it. Nothing depends on the blend -- without it the card is
     plainer, not broken. */
  mix-blend-mode:multiply;

  /* Multiply alone still leaves a faint edge, because these PNGs are shot on
     #F1F1F1 rather than pure white. Feathering the photo's own border dissolves
     that rectangle whatever grey each file happens to use, which is what makes
     this robust for images the client uploads later. closest-side keeps the fade
     outside the product itself, which sits well inside the frame. */
  -webkit-mask-image:radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 74%, transparent 100%);
}

/* The body fills the leftover height so the detail link lands on one baseline
   across cards whose summaries differ in length. */
.nk-cat-card .nk-cat-body{ flex:1 1 auto; display:flex; flex-direction:column; }
.nk-cat-card .nk-cat-body .nk-more{ margin-top:auto; }

/* Chips reuse the site's existing .nk-badges / .nk-badge pill, so they need no
   styling of their own -- only room above them. */
.nk-cat-tags{ margin-bottom:2px; }

/* ---------- Legal pages ----------
   The privacy policy is a normal Elementor document, so its type scale, colours
   and spacing live on the widgets, not here. What is left is only what an
   Elementor control cannot express: list indentation inside a Text Editor, and
   the inline code chip used for cookie names. */
.nk-legal-body ul{ margin:0 0 16px; padding-inline-start:20px; }
.nk-legal-body li{ margin:0 0 8px; }

.nk-legal-body code{
  font-family:"IBM Plex Mono",monospace; font-size:.86em;
  background:var(--nk-mist); color:var(--nk-teal-deep);
  padding:2px 6px; border-radius:5px;
}



/* =====================================================================
   Hero orb v2 (2026-09-04) — a lit sphere with ink blooming inside it.

   The previous orb was a spinning conic gradient: colourful, but flat, and the
   spin gave away that it was a 2D disc. This keeps the same element and the
   same rings, and rebuilds only the blob:

     base      radial shading, light from the upper left, so it reads as a ball
     ::before  four large blurred colour clouds on their own slow drifts,
               screen-blended so that where they overlap they mix rather than
               stack. That is the ink: it starts on the brand teal and blooms.
     ::after   specular highlight plus a dark rim on the shadow side, which is
               what actually sells the third dimension.

   Every moving property is composited, and the whole thing stops under
   prefers-reduced-motion at the end of this block.
   ===================================================================== */
.nk-orb .nk-orb-blob{
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 30% 24%, #2FBFAE 0%, #12786F 38%, #0A3A37 82%, #06201E 100%);
  opacity:1;
  box-shadow:0 40px 80px -30px rgba(6,32,30,.6), inset 0 0 60px rgba(6,32,30,.32);
  animation:nkOrbBob 20s ease-in-out infinite;
}

/* The ink itself. Four clouds on four periods, so the pattern never visibly
   repeats and the colours keep re-mixing. Teal stays the home colour; amber,
   violet and rose are held at lower alpha so the orb blooms without turning
   into a rainbow. */
.nk-orb .nk-orb-blob::before{
  content:"";
  position:absolute; inset:-20%;
  z-index:0;
  filter:blur(26px) saturate(170%);
  mix-blend-mode:screen;
  background:
    radial-gradient(closest-side circle at 32% 34%, rgba(94,234,212,.92), transparent 100%),
    radial-gradient(closest-side circle at 68% 30%, rgba(26,167,155,.80), transparent 100%),
    radial-gradient(closest-side circle at 40% 72%, rgba(217,164,65,.78), transparent 100%),
    radial-gradient(closest-side circle at 74% 68%, rgba(124,92,255,.66), transparent 100%);
  background-size:78% 78%, 66% 66%, 60% 60%, 58% 58%;
  background-repeat:no-repeat;
  animation:nkInkDriftA 34s ease-in-out infinite alternate;
}

/* Specular highlight and shadow-side rim. Without the rim the sphere reads as a
   flat disc with a shine on it. */
.nk-orb .nk-orb-blob::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  z-index:1;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.62), rgba(255,255,255,.10) 30%, transparent 52%),
    radial-gradient(circle at 78% 84%, rgba(255,255,255,.14), transparent 42%);
  box-shadow:inset -12px -16px 40px rgba(4,20,19,.36), inset 6px 8px 26px rgba(255,255,255,.10);
}

@keyframes nkOrbBob{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(0,-10px,0) scale(1.025); }
}

@keyframes nkInkDriftA{
  0%  { background-position:  8% 12%, 74% 10%, 30% 78%, 82% 70%; }
  33% { background-position: 34% 40%, 44% 28%, 62% 60%, 46% 88%; }
  66% { background-position: 62% 18%, 16% 56%, 18% 44%, 70% 34%; }
  100%{ background-position: 20% 62%, 68% 46%, 52% 22%, 30% 62%; }
}

@media (max-width:767px){
  /* Cheaper on a phone: blur radius is the single biggest cost on an animated,
     blended layer, and at this size the difference is not visible. */
  .nk-orb .nk-orb-blob::before{ filter:blur(17px) saturate(165%); }
  .nk-orb .nk-orb-blob{ box-shadow:0 26px 54px -24px rgba(6,32,30,.55), inset 0 0 40px rgba(6,32,30,.32); }
}

@media (prefers-reduced-motion: reduce){
  .nk-orb .nk-orb-blob,
  .nk-orb .nk-orb-blob::before{ animation:none !important; }
}


/* =====================================================================
   "How the two seals actually work" (2026-09-04)

   Two process columns either side of a centre rail, each step a card. Card
   chrome (background, border, radius) and every type value live on the
   Elementor container/widget controls, exactly like .nk-cat-card does, so the
   client can retune them in the panel. What is here is only what a control
   cannot express: the centre rail and VS marker, the icon plate, the per-icon
   loops, and the mobile reflow.
   ===================================================================== */

.nk-seals-grid{ position:relative; }

/* The rail is drawn on the grid rather than as an element so it cannot be
   dragged out of alignment in the editor, and so it simply disappears when the
   columns stack. */
@media (min-width:1025px){
  .nk-seals-grid::before{
    content:""; position:absolute; top:14px; bottom:14px; left:50%;
    width:1px; margin-left:-.5px;
    background:linear-gradient(180deg, transparent, rgba(7,33,31,.16) 12%, rgba(7,33,31,.16) 88%, transparent);
    pointer-events:none;
  }
}

/* VS marker, centred on the rail on desktop and inline between the two stacks
   on a phone. */
.nk-seals-vs{
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--nk-teal-deep); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.06em;
  box-shadow:0 10px 24px -10px rgba(7,33,31,.5);
  z-index:2;
}

@media (max-width:1024px){
  .nk-seals-vs{ position:static; transform:none; margin:6px auto; }
}

/* ---- step card ---- */
/* Elementor gives a nested container width:100%, which in a row-direction
   parent wraps the text under the icon as soon as the column narrows. Pinning
   the plate and letting the text be the flexible track keeps the icon beside
   the copy at every width. min-width:0 is what allows the text to shrink
   instead of forcing the wrap back. */
.nk-seal-step{ flex-wrap:nowrap !important; transition:transform .2s ease, box-shadow .2s ease; }
.nk-seal-step > .nk-seal-ico{ flex:0 0 52px; }
.nk-seal-step > *:last-child{ flex:1 1 auto; min-width:0; }
.nk-seal-step:hover{ transform:translateY(-3px); box-shadow:var(--nk-shadow); }

/* The icon sits on its own plate so the loops below have something stable to
   animate inside, and so a long title never pushes the icon out of line. */
.nk-seal-ico{
  flex:0 0 auto;
  width:52px; height:52px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--nk-mist);
  border:1px solid rgba(15,107,99,.16);
  overflow:hidden;
}

.nk-seal-ico .elementor-icon{ display:flex; }
.nk-seal-ico svg{ width:24px; height:24px; }

/* ---- one loop per icon ----------------------------------------------
   Each step gets a motion that describes what that step physically does, so
   the animation carries meaning instead of decorating. All transform/opacity
   only, and all of it stops under prefers-reduced-motion at the end. */

.nk-ico-web svg, .nk-ico-web i{ animation:nkIcoWeb 6s ease-in-out infinite; transform-origin:50% 50%; }
.nk-ico-layers svg, .nk-ico-layers i{ animation:nkIcoLayers 4.2s ease-in-out infinite; }
.nk-ico-press svg, .nk-ico-press i{ animation:nkIcoPress 3s ease-in-out infinite; transform-origin:50% 65%; }
.nk-ico-zip svg, .nk-ico-zip i{ animation:nkIcoZip 4.6s ease-in-out infinite; }
.nk-ico-shield svg, .nk-ico-shield i{ animation:nkIcoShield 4s ease-in-out infinite; transform-origin:50% 50%; }
.nk-ico-pouch svg, .nk-ico-pouch i{ animation:nkIcoPouch 5s ease-in-out infinite; }
.nk-ico-heat svg, .nk-ico-heat i{ animation:nkIcoHeat 2.4s ease-in-out infinite; transform-origin:50% 75%; }
.nk-ico-cool svg, .nk-ico-cool i{ animation:nkIcoCool 14s linear infinite; transform-origin:50% 50%; }
.nk-ico-award svg, .nk-ico-award i{ animation:nkIcoAward 5.5s ease-in-out infinite; transform-origin:50% 50%; }
.nk-ico-gear svg, .nk-ico-gear i{ animation:nkIcoGear 12s linear infinite; transform-origin:50% 50%; }
.nk-ico-check svg, .nk-ico-check i{ animation:nkIcoCheck 4.4s ease-in-out infinite; transform-origin:50% 50%; }

@keyframes nkIcoWeb{    0%,100%{ transform:rotate(-7deg) } 50%{ transform:rotate(7deg) } }
@keyframes nkIcoLayers{ 0%,100%{ transform:translateY(0) }  45%{ transform:translateY(-4px) } }
@keyframes nkIcoPress{  0%,100%{ transform:scaleY(1) }      55%{ transform:scaleY(.76) } }
@keyframes nkIcoZip{    0%,100%{ transform:translateY(-4px) } 50%{ transform:translateY(4px) } }
@keyframes nkIcoShield{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.12); opacity:.86 } }
@keyframes nkIcoPouch{  0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-3px) rotate(-3deg) } }
@keyframes nkIcoHeat{   0%,100%{ transform:scaleY(1) translateY(0); opacity:1 } 40%{ transform:scaleY(1.16) translateY(-2px); opacity:.82 } }
@keyframes nkIcoCool{   to{ transform:rotate(360deg) } }
@keyframes nkIcoAward{  0%,100%{ transform:rotate(-5deg) } 50%{ transform:rotate(5deg) } }
@keyframes nkIcoGear{   to{ transform:rotate(360deg) } }
@keyframes nkIcoCheck{  0%,72%,100%{ transform:scale(1) } 82%{ transform:scale(1.18) } }

/* ---- benefits bar ---- */
.nk-seal-benefits .elementor-icon{ display:flex; }
.nk-seal-benefits svg{ width:26px; height:26px; }

/* Separators between the four claims, dropped on the wrapped rows so no item
   ever carries a dangling rule. */
@media (min-width:1025px){
  .nk-seal-benefit + .nk-seal-benefit{ border-left:1px solid rgba(255,255,255,.18); }
}

@media (max-width:767px){
  .nk-seal-ico{ width:46px; height:46px; border-radius:12px; }
  .nk-seal-ico svg{ width:21px; height:21px; }
  .nk-seals-vs{ width:46px; height:46px; }
}

@media (prefers-reduced-motion: reduce){
  .nk-seal-step{ transition:none; }
  .nk-seals-grid [class*="nk-ico-"] svg, .nk-seals-grid [class*="nk-ico-"] i{ animation:none !important; }
}