/* ============================================================================
   NAUTIKA UI/UX FRAMEWORK  ·  core.css  ·  v2 "Chart Deck"
   Maritime design system for the Andaman ferry platform.
   Pure CSS + vanilla JS (jQuery optional). No build step required.
   ----------------------------------------------------------------------------
   Layers in this file:
     1.  Design tokens (CSS custom properties)  — fully themeable
     2.  Modern reset
     3.  Responsive typography
     4.  Layout: container, 12-col grid, flex helpers
     5.  Spacing / sizing / color / utility helpers
     6.  Keyframe animations + animation classes
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================== */
:root {
  /* ---- Brand palette (required) -------------------------------------- */
  --nk-primary:        #0099ff;   /* ocean blue   */
  --nk-secondary:      #ffdb4d;   /* sand yellow  */
  --nk-error:          #ff6666;   /* coral red    */
  --nk-warning:        #ffb84d;   /* sunset orange*/
  --nk-success:        #16bd92;   /* lagoon green */
  --nk-info:           #38bdf8;   /* sky          */
  --nk-reef:           #00d4c8;   /* turquoise support (gradient partner) */

  /* ---- Tints / shades (auto-derived scales) -------------------------- */
  --nk-primary-50:     #eaf6ff;
  --nk-primary-100:    #d2ecff;
  --nk-primary-200:    #a6daff;
  --nk-primary-300:    #6cc2ff;
  --nk-primary-400:    #2eadff;
  --nk-primary-500:    #0099ff;
  --nk-primary-600:    #007ad1;
  --nk-primary-700:    #005c9e;
  --nk-primary-800:    #084271;
  --nk-primary-900:    #0a2b47;

  --nk-secondary-50:   #fffae5;
  --nk-secondary-200:  #ffeea1;
  --nk-secondary-500:  #ffdb4d;
  --nk-secondary-700:  #b8940e;

  --nk-success-50:     #e2f9f2;
  --nk-success-500:    #16bd92;
  --nk-success-700:    #0d8567;
  --nk-warning-50:     #fff4e3;
  --nk-warning-500:    #ffb84d;
  --nk-warning-700:    #b06f10;
  --nk-error-50:       #ffecec;
  --nk-error-500:      #ff6666;
  --nk-error-700:      #cc3b3b;

  /* ---- Neutrals (cool, oceanic, calmer than v1) ----------------------- */
  --nk-white:          #ffffff;
  --nk-ink:            #0b2033;   /* deep navy text   */
  --nk-ink-soft:       #33506a;
  --nk-muted:          #5f7d97;
  --nk-faint:          #97adc0;
  --nk-line:           #e4edf4;
  --nk-line-strong:    #cfdfea;
  --nk-surface:        #ffffff;
  --nk-surface-2:      #f2f7fb;   /* subtle panel     */
  --nk-bg:             #f7fafd;   /* page background  */
  --nk-overlay:        rgba(4, 18, 31, .58);

  /* ---- Chart-deck darks (hero, search deck, footer) ------------------- */
  --nk-abyss:          #04121f;   /* deepest navy               */
  --nk-abyss-2:        #082138;   /* raised dark surface        */
  --nk-abyss-3:        #0d2f4d;   /* hover / border dark        */
  --nk-deck-line:      rgba(151, 195, 235, .16);
  --nk-deck-text:      #d9e8f4;
  --nk-deck-muted:     #7f9cb5;

  /* ---- Gradients / atmosphere ---------------------------------------- */
  --nk-grad-ocean:     linear-gradient(135deg, #0099ff 0%, #00d4c8 100%);
  --nk-grad-sunset:    linear-gradient(135deg, #ffb84d 0%, #ff6666 100%);
  --nk-grad-sand:      linear-gradient(135deg, #ffdb4d 0%, #ffb84d 100%);
  --nk-grad-deep:      linear-gradient(168deg, #04121f 0%, #082138 55%, #0a3a63 100%);
  --nk-grad-hero:      linear-gradient(172deg, #04121f 0%, #062642 48%, #0a5a91 88%, #0099ff 135%);

  /* ---- Typography ---------------------------------------------------- */
  --nk-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --nk-font-body:    "Roboto", "Segoe UI", system-ui, sans-serif;
  --nk-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", monospace;

  /* fluid type scale — clamp(min, preferred, max) */
  --nk-text-xs:   clamp(.70rem, .68rem + .1vw,  .78rem);
  --nk-text-sm:   clamp(.80rem, .77rem + .15vw, .90rem);
  --nk-text-base: clamp(.92rem, .88rem + .2vw,  1.02rem);
  --nk-text-lg:   clamp(1.05rem, .98rem + .35vw, 1.22rem);
  --nk-text-xl:   clamp(1.25rem, 1.1rem + .6vw,  1.6rem);
  --nk-text-2xl:  clamp(1.6rem, 1.3rem + 1.2vw,  2.3rem);
  --nk-text-3xl:  clamp(2rem, 1.5rem + 2.2vw,    3.1rem);
  --nk-text-4xl:  clamp(2.4rem, 1.6rem + 3.8vw,  4.4rem);

  /* ---- Spacing scale (4px base) ------------------------------------- */
  --nk-space-0: 0;     --nk-space-1: .25rem; --nk-space-2: .5rem;
  --nk-space-3: .75rem;--nk-space-4: 1rem;   --nk-space-5: 1.5rem;
  --nk-space-6: 2rem;  --nk-space-7: 3rem;   --nk-space-8: 4rem;
  --nk-space-9: 6rem;  --nk-space-10: 8rem;

  /* ---- Radius ------------------------------------------------------- */
  --nk-radius-xs: 6px;  --nk-radius-sm: 10px; --nk-radius:    14px;
  --nk-radius-lg: 18px; --nk-radius-xl: 26px; --nk-radius-pill: 999px;

  /* ---- Elevation / shadows (layered, soft) --------------------------- */
  --nk-shadow-xs: 0 1px 2px rgba(11,32,51,.05);
  --nk-shadow-sm: 0 1px 2px rgba(11,32,51,.05), 0 4px 12px -4px rgba(11,32,51,.08);
  --nk-shadow:    0 1px 3px rgba(11,32,51,.05), 0 12px 28px -10px rgba(11,32,51,.14);
  --nk-shadow-lg: 0 2px 6px rgba(11,32,51,.05), 0 24px 56px -16px rgba(11,32,51,.22);
  --nk-shadow-xl: 0 4px 10px rgba(11,32,51,.06), 0 40px 90px -20px rgba(11,32,51,.32);
  --nk-shadow-primary: 0 8px 24px -6px rgba(0,153,255,.42);
  --nk-focus-ring: 0 0 0 4px var(--nk-primary-50);

  /* ---- Motion ------------------------------------------------------- */
  --nk-ease:        cubic-bezier(.4, 0, .2, 1);
  --nk-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --nk-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --nk-dur-fast: 150ms; --nk-dur: 260ms; --nk-dur-slow: 480ms;

  /* ---- Layout ------------------------------------------------------- */
  --nk-container: 1200px;
  --nk-container-wide: 1440px;
  --nk-gutter: clamp(1rem, 3vw, 2rem);
  --nk-z-nav: 100; --nk-z-dropdown: 300; --nk-z-overlay: 800;
  --nk-z-modal: 900; --nk-z-toast: 1000; --nk-z-tooltip: 1100;
}

/* 2. RESET ================================================================= */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; min-width: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html,body { overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--nk-font-body);
  font-size: var(--nk-text-base);
  line-height: 1.6;
  color: var(--nk-ink);
  background: var(--nk-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img,svg,video,canvas { display: block; max-width: 100%; height: auto; }
input,button,textarea,select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--nk-primary-600); text-decoration: none; transition: color var(--nk-dur-fast); }
a:hover { color: var(--nk-primary-700); }
ul[class],ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--nk-primary-300); outline-offset: 2px; border-radius: var(--nk-radius-xs); }
::selection { background: var(--nk-primary-200); color: var(--nk-primary-900); }
hr { border: none; border-top: 1px solid var(--nk-line); }
[hidden] { display: none !important; }

/* Custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--nk-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--nk-line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--nk-faint); background-clip: content-box; }

/* 3. TYPOGRAPHY ============================================================ */
h1,h2,h3,h4,h5,h6,.nk-h1,.nk-h2,.nk-h3,.nk-h4,.nk-h5,.nk-h6 {
  font-family: var(--nk-font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--nk-ink);
}
h1,.nk-h1 { font-size: var(--nk-text-4xl); }
h2,.nk-h2 { font-size: var(--nk-text-3xl); }
h3,.nk-h3 { font-size: var(--nk-text-2xl); }
h4,.nk-h4 { font-size: var(--nk-text-xl); }
h5,.nk-h5 { font-size: var(--nk-text-lg); }
h6,.nk-h6 { font-size: var(--nk-text-base); letter-spacing: .04em; text-transform: uppercase; }
p { font-size: var(--nk-text-base); }
small,.nk-small { font-size: var(--nk-text-sm); }
.nk-text-xs{font-size:var(--nk-text-xs)} .nk-text-sm{font-size:var(--nk-text-sm)}
.nk-text-base{font-size:var(--nk-text-base)} .nk-text-lg{font-size:var(--nk-text-lg)}
.nk-text-xl{font-size:var(--nk-text-xl)} .nk-text-2xl{font-size:var(--nk-text-2xl)}
.nk-text-3xl{font-size:var(--nk-text-3xl)} .nk-text-4xl{font-size:var(--nk-text-4xl)}
.nk-lead { font-size: var(--nk-text-lg); color: var(--nk-ink-soft); font-weight: 400; line-height: 1.65; }
.nk-eyebrow { font-family: var(--nk-font-display); font-size: var(--nk-text-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nk-primary-600);
  display: inline-flex; align-items: center; gap: .6rem; }
.nk-eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--nk-grad-ocean); }
.nk-eyebrow-plain::before { display: none; }
.nk-display { font-family: var(--nk-font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.032em; }
.nk-mono { font-family: var(--nk-font-mono); }
/* tabular numerals — departure boards, prices, timetables */
.nk-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.nk-gradient-text {
  background: var(--nk-grad-ocean); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nk-fw-300{font-weight:300}.nk-fw-400{font-weight:400}.nk-fw-500{font-weight:500}
.nk-fw-600{font-weight:600}.nk-fw-700{font-weight:700}.nk-fw-800{font-weight:800}
.nk-italic{font-style:italic}
.nk-uppercase{text-transform:uppercase;letter-spacing:.05em}
.nk-capitalize{text-transform:capitalize}
.nk-text-left{text-align:left}.nk-text-center{text-align:center}.nk-text-right{text-align:right}
.nk-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nk-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nk-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nk-leading-tight{line-height:1.2}.nk-leading-normal{line-height:1.6}.nk-leading-loose{line-height:1.9}

/* 4. LAYOUT ================================================================ */
.nk-container { width: 100%; max-width: var(--nk-container); margin-inline: auto; padding-inline: var(--nk-gutter); }
.nk-container-wide { max-width: var(--nk-container-wide); }
.nk-container-fluid { max-width: none; }
.nk-container-narrow { max-width: 760px; }
.nk-section { padding-block: clamp(2.5rem, 6vw, 6rem); }
.nk-section-sm { padding-block: clamp(1.5rem, 4vw, 3rem); }

/* --- 12 column responsive grid --- */
.nk-grid { display: grid; gap: var(--nk-gutter); grid-template-columns: repeat(12, 1fr); }
.nk-grid.nk-gap-0{gap:0}.nk-grid.nk-gap-sm{gap:.75rem}
.nk-grid.nk-gap-lg{gap:2.5rem}.nk-grid.nk-gap-xl{gap:4rem}
[class*="nk-col-"] { grid-column: span 12; }
.nk-col-1{grid-column:span 1}.nk-col-2{grid-column:span 2}.nk-col-3{grid-column:span 3}
.nk-col-4{grid-column:span 4}.nk-col-5{grid-column:span 5}.nk-col-6{grid-column:span 6}
.nk-col-7{grid-column:span 7}.nk-col-8{grid-column:span 8}.nk-col-9{grid-column:span 9}
.nk-col-10{grid-column:span 10}.nk-col-11{grid-column:span 11}.nk-col-12{grid-column:span 12}
.nk-col-auto{grid-column:auto}

/* responsive col helpers: sm ≥640, md ≥768, lg ≥1024, xl ≥1280 */
@media (min-width:640px){
  .nk-col-sm-1{grid-column:span 1}.nk-col-sm-2{grid-column:span 2}.nk-col-sm-3{grid-column:span 3}
  .nk-col-sm-4{grid-column:span 4}.nk-col-sm-6{grid-column:span 6}.nk-col-sm-8{grid-column:span 8}
  .nk-col-sm-12{grid-column:span 12}
}
@media (min-width:768px){
  .nk-col-md-1{grid-column:span 1}.nk-col-md-2{grid-column:span 2}.nk-col-md-3{grid-column:span 3}
  .nk-col-md-4{grid-column:span 4}.nk-col-md-5{grid-column:span 5}.nk-col-md-6{grid-column:span 6}
  .nk-col-md-7{grid-column:span 7}.nk-col-md-8{grid-column:span 8}.nk-col-md-9{grid-column:span 9}
  .nk-col-md-12{grid-column:span 12}
}
@media (min-width:1024px){
  .nk-col-lg-1{grid-column:span 1}.nk-col-lg-2{grid-column:span 2}.nk-col-lg-3{grid-column:span 3}
  .nk-col-lg-4{grid-column:span 4}.nk-col-lg-5{grid-column:span 5}.nk-col-lg-6{grid-column:span 6}
  .nk-col-lg-7{grid-column:span 7}.nk-col-lg-8{grid-column:span 8}.nk-col-lg-9{grid-column:span 9}
  .nk-col-lg-10{grid-column:span 10}.nk-col-lg-12{grid-column:span 12}
}
@media (min-width:1280px){
  .nk-col-xl-3{grid-column:span 3}.nk-col-xl-4{grid-column:span 4}.nk-col-xl-6{grid-column:span 6}
  .nk-col-xl-8{grid-column:span 8}.nk-col-xl-9{grid-column:span 9}
}

/* auto-fit responsive grids (no media queries needed) */
.nk-grid-auto, .nk-grid-auto-sm, .nk-grid-auto-lg { display: grid; gap: var(--nk-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.nk-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.nk-grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* --- Flexbox helpers (full set, as required) --- */
.nk-flex{display:flex}.nk-inline-flex{display:inline-flex}
.nk-flex-row{flex-direction:row}.nk-flex-col{flex-direction:column}
.nk-flex-row-rev{flex-direction:row-reverse}.nk-flex-col-rev{flex-direction:column-reverse}
.nk-flex-wrap{flex-wrap:wrap}.nk-flex-nowrap{flex-wrap:nowrap}
.nk-items-start{align-items:flex-start}.nk-items-center{align-items:center}
.nk-items-end{align-items:flex-end}.nk-items-stretch{align-items:stretch}
.nk-items-baseline{align-items:baseline}
.nk-justify-start{justify-content:flex-start}.nk-justify-center{justify-content:center}
.nk-justify-end{justify-content:flex-end}.nk-justify-between{justify-content:space-between}
.nk-justify-around{justify-content:space-around}.nk-justify-evenly{justify-content:space-evenly}
.nk-content-center{align-content:center}.nk-self-center{align-self:center}.nk-self-end{align-self:flex-end}
.nk-flex-1{flex:1 1 0%}.nk-flex-auto{flex:1 1 auto}.nk-flex-none{flex:none}
.nk-grow{flex-grow:1}.nk-grow-0{flex-grow:0}.nk-shrink{flex-shrink:1}.nk-shrink-0{flex-shrink:0}
.nk-order-first{order:-1}.nk-order-last{order:999}
/* gap helpers */
.nk-gap-0{gap:0}.nk-gap-1{gap:.25rem}.nk-gap-2{gap:.5rem}.nk-gap-3{gap:.75rem}
.nk-gap-4{gap:1rem}.nk-gap-5{gap:1.5rem}.nk-gap-6{gap:2rem}.nk-gap-7{gap:3rem}
.nk-gap-x-4{column-gap:1rem}.nk-gap-y-4{row-gap:1rem}
/* center shortcut */
.nk-center{display:flex;align-items:center;justify-content:center}
.nk-stack{display:flex;flex-direction:column}
.nk-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}

/* 5. UTILITIES ============================================================= */
/* display */
.nk-block{display:block}.nk-inline{display:inline}.nk-inline-block{display:inline-block}
.nk-grid-d{display:grid}.nk-hidden{display:none}.nk-contents{display:contents}
/* responsive show/hide */
@media (max-width:767px){ .nk-hide-mobile{display:none!important} }
@media (min-width:768px){ .nk-only-mobile{display:none!important} }
@media (max-width:1023px){ .nk-hide-tablet{display:none!important} }
@media (min-width:1024px){ .nk-only-tablet-down{display:none!important} }

/* position */
.nk-relative{position:relative}.nk-absolute{position:absolute}.nk-fixed{position:fixed}
.nk-sticky{position:sticky}.nk-static{position:static}
.nk-top-0{top:0}.nk-right-0{right:0}.nk-bottom-0{bottom:0}.nk-left-0{left:0}.nk-inset-0{inset:0}
.nk-z-10{z-index:10}.nk-z-50{z-index:50}.nk-z-nav{z-index:var(--nk-z-nav)}

/* width / height */
.nk-w-full{width:100%}.nk-w-auto{width:auto}.nk-w-fit{width:fit-content}
.nk-h-full{height:100%}.nk-h-screen{height:100vh}.nk-min-h-screen{min-height:100vh}
.nk-max-w-xs{max-width:20rem}.nk-max-w-sm{max-width:24rem}.nk-max-w-md{max-width:28rem}
.nk-max-w-lg{max-width:32rem}.nk-max-w-xl{max-width:36rem}.nk-mx-auto{margin-inline:auto}

/* spacing — margin */
.nk-m-0{margin:0}.nk-m-auto{margin:auto}
.nk-mt-1{margin-top:.25rem}.nk-mt-2{margin-top:.5rem}.nk-mt-3{margin-top:.75rem}.nk-mt-4{margin-top:1rem}
.nk-mt-5{margin-top:1.5rem}.nk-mt-6{margin-top:2rem}.nk-mt-7{margin-top:3rem}.nk-mt-8{margin-top:4rem}
.nk-mb-1{margin-bottom:.25rem}.nk-mb-2{margin-bottom:.5rem}.nk-mb-3{margin-bottom:.75rem}.nk-mb-4{margin-bottom:1rem}
.nk-mb-5{margin-bottom:1.5rem}.nk-mb-6{margin-bottom:2rem}.nk-mb-7{margin-bottom:3rem}.nk-mb-8{margin-bottom:4rem}
.nk-ml-auto{margin-left:auto}.nk-mr-auto{margin-right:auto}
.nk-my-4{margin-block:1rem}.nk-my-6{margin-block:2rem}.nk-mx-2{margin-inline:.5rem}
/* spacing — padding */
.nk-p-0{padding:0}.nk-p-2{padding:.5rem}.nk-p-3{padding:.75rem}.nk-p-4{padding:1rem}
.nk-p-5{padding:1.5rem}.nk-p-6{padding:2rem}.nk-p-7{padding:3rem}
.nk-px-2{padding-inline:.5rem}.nk-px-3{padding-inline:.75rem}.nk-px-4{padding-inline:1rem}
.nk-px-5{padding-inline:1.5rem}.nk-px-6{padding-inline:2rem}
.nk-py-1{padding-block:.25rem}.nk-py-2{padding-block:.5rem}.nk-py-3{padding-block:.75rem}
.nk-py-4{padding-block:1rem}.nk-py-5{padding-block:1.5rem}.nk-py-6{padding-block:2rem}

/* color text */
.nk-text-primary{color:var(--nk-primary)}.nk-text-secondary{color:var(--nk-secondary-700)}
.nk-text-success{color:var(--nk-success-700)}.nk-text-warning{color:var(--nk-warning-700)}
.nk-text-error{color:var(--nk-error-700)}.nk-text-ink{color:var(--nk-ink)}
.nk-text-muted{color:var(--nk-muted)}.nk-text-soft{color:var(--nk-ink-soft)}
.nk-text-white{color:#fff}.nk-text-faint{color:var(--nk-faint)}
/* color background */
.nk-bg-primary{background:var(--nk-primary)}.nk-bg-secondary{background:var(--nk-secondary)}
.nk-bg-success{background:var(--nk-success)}.nk-bg-warning{background:var(--nk-warning)}
.nk-bg-error{background:var(--nk-error)}.nk-bg-surface{background:var(--nk-surface)}
.nk-bg-surface-2{background:var(--nk-surface-2)}.nk-bg-bg{background:var(--nk-bg)}
.nk-bg-ink{background:var(--nk-ink)}.nk-bg-transparent{background:transparent}
.nk-bg-ocean{background:var(--nk-grad-ocean)}.nk-bg-sunset{background:var(--nk-grad-sunset)}
.nk-bg-sand{background:var(--nk-grad-sand)}.nk-bg-deep{background:var(--nk-grad-deep)}
.nk-bg-abyss{background:var(--nk-abyss)}
.nk-bg-primary-50{background:var(--nk-primary-50)}

/* nautical chart contours — lightweight inline SVG, use on dark surfaces */
.nk-chart-bg{position:relative;isolation:isolate}
.nk-chart-bg::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%2397c3eb' stroke-opacity='.09' stroke-width='1.4'%3E%3Cpath d='M-40 120c90-45 190-60 300-28s220 18 340-30'/%3E%3Cpath d='M-40 210c110-50 220-40 330-6s200 30 310-24'/%3E%3Cpath d='M-40 306c100-40 210-52 320-16s210 40 320-18'/%3E%3Cpath d='M-40 402c120-46 230-30 330 4s220 22 310-30'/%3E%3Cpath d='M-40 498c100-40 220-56 330-14s220 34 310-22'/%3E%3C/g%3E%3Cg fill='%2397c3eb' fill-opacity='.14'%3E%3Ccircle cx='118' cy='96' r='1.6'/%3E%3Ccircle cx='420' cy='176' r='1.6'/%3E%3Ccircle cx='250' cy='330' r='1.6'/%3E%3Ccircle cx='480' cy='430' r='1.6'/%3E%3Ccircle cx='90' cy='470' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px}

/* borders & radius */
.nk-border{border:1px solid var(--nk-line)}.nk-border-strong{border:1px solid var(--nk-line-strong)}
.nk-border-0{border:0}.nk-border-t{border-top:1px solid var(--nk-line)}
.nk-border-b{border-bottom:1px solid var(--nk-line)}
.nk-border-primary{border-color:var(--nk-primary)}
.nk-rounded-0{border-radius:0}.nk-rounded-xs{border-radius:var(--nk-radius-xs)}
.nk-rounded-sm{border-radius:var(--nk-radius-sm)}.nk-rounded{border-radius:var(--nk-radius)}
.nk-rounded-lg{border-radius:var(--nk-radius-lg)}.nk-rounded-xl{border-radius:var(--nk-radius-xl)}
.nk-rounded-full{border-radius:var(--nk-radius-pill)}

/* shadows / elevation (configurable 3D) */
.nk-shadow-none{box-shadow:none}.nk-shadow-xs{box-shadow:var(--nk-shadow-xs)}
.nk-shadow-sm{box-shadow:var(--nk-shadow-sm)}.nk-shadow{box-shadow:var(--nk-shadow)}
.nk-shadow-lg{box-shadow:var(--nk-shadow-lg)}.nk-shadow-xl{box-shadow:var(--nk-shadow-xl)}
.nk-shadow-primary{box-shadow:var(--nk-shadow-primary)}

/* effects */
.nk-glass{background:rgba(255,255,255,.66);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.55)}
.nk-glass-dark{background:rgba(8,33,56,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(151,195,235,.14);color:var(--nk-deck-text)}
.nk-noise{position:relative}
.nk-noise::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.nk-cursor-pointer{cursor:pointer}.nk-select-none{user-select:none}
.nk-overflow-hidden{overflow:hidden}.nk-overflow-auto{overflow:auto}
.nk-opacity-0{opacity:0}.nk-opacity-50{opacity:.5}.nk-opacity-100{opacity:1}
.nk-aspect-square{aspect-ratio:1/1}.nk-aspect-video{aspect-ratio:16/9}.nk-aspect-photo{aspect-ratio:4/3}
.nk-object-cover{object-fit:cover}.nk-object-contain{object-fit:contain}

/* 6. ANIMATIONS (UIKit-style) ============================================== */
@keyframes nk-fade        {from{opacity:0}to{opacity:1}}
@keyframes nk-fade-up     {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes nk-fade-down   {from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes nk-fade-left   {from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes nk-fade-right  {from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes nk-scale-up    {from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes nk-scale-down  {from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes nk-slide-in    {from{transform:translateX(-100%)}to{transform:none}}
@keyframes nk-spin        {to{transform:rotate(360deg)}}
@keyframes nk-pulse       {0%,100%{opacity:1}50%{opacity:.45}}
@keyframes nk-bounce      {0%,100%{transform:translateY(0)}50%{transform:translateY(-22%)}}
@keyframes nk-float       {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes nk-shake       {10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes nk-shimmer     {100%{background-position:200% 0}}
@keyframes nk-wave        {0%,100%{transform:translateX(0)}50%{transform:translateX(-25%)}}
@keyframes nk-progress-bar{from{transform:translateX(-100%)}to{transform:translateX(400%)}}
@keyframes nk-dash        {to{stroke-dashoffset:-24}}
@keyframes nk-dash-bg     {to{background-position:24px 0}}
@keyframes nk-swell       {0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-2.5%) translateY(6px)}}

.nk-anim-fade      {animation:nk-fade var(--nk-dur-slow) var(--nk-ease) both}
.nk-anim-fade-up   {animation:nk-fade-up var(--nk-dur-slow) var(--nk-ease-out) both}
.nk-anim-fade-down {animation:nk-fade-down var(--nk-dur-slow) var(--nk-ease-out) both}
.nk-anim-fade-left {animation:nk-fade-left var(--nk-dur-slow) var(--nk-ease-out) both}
.nk-anim-fade-right{animation:nk-fade-right var(--nk-dur-slow) var(--nk-ease-out) both}
.nk-anim-scale-up  {animation:nk-scale-up var(--nk-dur-slow) var(--nk-ease-spring) both}
.nk-anim-scale-down{animation:nk-scale-down var(--nk-dur-slow) var(--nk-ease-out) both}
.nk-anim-bounce    {animation:nk-bounce 1s var(--nk-ease) infinite}
.nk-anim-float     {animation:nk-float 5s ease-in-out infinite}
.nk-anim-spin      {animation:nk-spin 1s linear infinite}
.nk-anim-pulse     {animation:nk-pulse 1.6s var(--nk-ease) infinite}
.nk-anim-shake     {animation:nk-shake .5s var(--nk-ease) both}

/* staggered reveal delays */
.nk-delay-1{animation-delay:.08s}.nk-delay-2{animation-delay:.16s}.nk-delay-3{animation-delay:.24s}
.nk-delay-4{animation-delay:.32s}.nk-delay-5{animation-delay:.4s}.nk-delay-6{animation-delay:.48s}
.nk-delay-7{animation-delay:.56s}.nk-delay-8{animation-delay:.64s}

/* transition helpers */
.nk-transition{transition:all var(--nk-dur) var(--nk-ease)}
.nk-transition-fast{transition:all var(--nk-dur-fast) var(--nk-ease)}
.nk-hover-lift{transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out)}
.nk-hover-lift:hover{transform:translateY(-5px);box-shadow:var(--nk-shadow-lg)}
.nk-hover-grow{transition:transform var(--nk-dur) var(--nk-ease-out)}
.nk-hover-grow:hover{transform:scale(1.04)}
.nk-hover-glow{transition:box-shadow var(--nk-dur)}
.nk-hover-glow:hover{box-shadow:var(--nk-shadow-primary)}

/* skeleton loader */
.nk-skeleton{background:linear-gradient(90deg,var(--nk-surface-2) 25%,var(--nk-line) 37%,var(--nk-surface-2) 63%);
  background-size:400% 100%;animation:nk-shimmer 1.4s ease infinite;border-radius:var(--nk-radius-sm)}

/* scroll reveal hook (toggled by nautika.js) */
[data-nk-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s var(--nk-ease-out),transform .7s var(--nk-ease-out)}
[data-nk-reveal].nk-in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-nk-reveal]{opacity:1;transform:none}
}