/* ═══════════════════════════════════════════════════════════════════════
   INK · the public site
   ───────────────────────────────────────────────────────────────────────
   Clean and quiet: a field of dots rolls slowly behind everything
   (bg.js), the top bar switches between Plans, Documentation and
   Contact, and each view says as little as it can.

   Hover, after backtrader.io: quick tints (.15s), an arrow that draws
   itself in, a sheen that crosses a card once, a small nudge on press.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Inter-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ff: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --paper:   #fbfbfc;
  --surface: #ffffff;
  --glass:   rgba(255,255,255,.94);
  --sink:    #f1f3f7;
  --ink:     #0f1222;
  --ink-rgb: 15,18,34;
  --ink-2:   #3c4257;
  --ink-3:   #6b7285;
  --ink-4:   #a3a9b8;
  --rule:    #e8eaf0;
  --rule-2:  #d9dce5;
  --press:   #3d5afe;
  --press-2: #2c46d9;
  --press-rgb: 61,90,254;
  --cop:     #12a150;
  --cop-2:   #0c8742;
  --cop-rgb: 18,161,80;
  --mentor:  #7c3aed;
  --mentor-2:#6526d4;
  --mentor-rgb: 124,58,237;
  /* the background's dots, read by bg.js: pale blue to Ink blue */
  --dot-a:   110,150,255;
  --dot-b:   61,90,254;
  --dot-alpha: .8;
  --dot-clear: 1;   /* keep the middle clear for the headline */
  --shadow:  0 1px 2px rgba(15,18,34,.05), 0 1px 1px rgba(15,18,34,.03);
  --shadow-lg: 0 10px 30px rgba(15,18,34,.10), 0 2px 6px rgba(15,18,34,.05);
  --ease:    cubic-bezier(.4,0,.2,1);
  --out:     cubic-bezier(.2,.8,.2,1);
  --gutter:  clamp(16px, 4vw, 32px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#07080d; --surface:#10121b; --glass:rgba(16,18,27,.93); --sink:#171a26;
    --ink:#f2f3f8; --ink-rgb:242,243,248; --ink-2:#c9cdd9; --ink-3:#8b91a3; --ink-4:#5a6072;
    --rule:#1f2331; --rule-2:#2c3142; --press:#5b74ff; --press-2:#7389ff; --press-rgb:91,116,255;
    --dot-a: 40,60,150; --dot-b: 110,140,255; --dot-alpha: .75;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#07080d; --surface:#10121b; --glass:rgba(16,18,27,.93); --sink:#171a26;
  --ink:#f2f3f8; --ink-rgb:242,243,248; --ink-2:#c9cdd9; --ink-3:#8b91a3; --ink-4:#5a6072;
  --rule:#1f2331; --rule-2:#2c3142; --press:#5b74ff; --press-2:#7389ff; --press-rgb:91,116,255;
  --dot-a: 40,60,150; --dot-b: 110,140,255; --dot-alpha: .75;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--ff); font-size: 16px; line-height: 1.5; letter-spacing: -0.01em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
svg{ display: block; }
a{ color: inherit; }
h1, h2, h3, p{ margin: 0; }
:focus-visible{ outline: 2px solid var(--press); outline-offset: 2px; border-radius: 8px; }

/* ── The moving background ──────────────────────────────────────────── */
.bg{ position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg canvas{ position: relative; width: 100%; height: 100%; display: block; }

/* ── The animated arrow ─────────────────────────────────────────────── */
.arrow{ width: 16px; height: 16px; flex: 0 0 auto; margin-right: -4px; overflow: visible; }
.arrow path{ fill: none; stroke: currentColor; stroke-width: 1.6; }
.arrow .chev{ stroke-linecap: square; stroke-linejoin: round; transform: translateX(-3px); transition: transform .15s var(--ease); }
.arrow .stem{ stroke-dasharray: 10; stroke-dashoffset: 10; transform: translateX(-3px); transition: stroke-dashoffset .15s var(--ease), transform .15s var(--ease); }
.has-arrow:hover .arrow .chev, .has-arrow:focus-visible .arrow .chev,
.has-arrow:hover .arrow .stem, .has-arrow:focus-visible .arrow .stem{ transform: translateX(0); }
.has-arrow:hover .arrow .stem, .has-arrow:focus-visible .arrow .stem{ stroke-dashoffset: 0; }
.has-arrow:active .arrow .chev, .has-arrow:active .arrow .stem{ transform: translateX(2px); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  --bg: var(--ink); --bg-h: #262b40; --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg);
  font: 600 15px/1 var(--ff); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(15,18,34,.15);
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.btn:hover{ background: var(--bg-h); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(15,18,34,.18); }
.btn:active{ transform: scale(.98); }
.btn-blue{ --bg: var(--press); --bg-h: var(--press-2); }
.btn-blue:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(var(--press-rgb), .32); }
.btn-ghost{ --bg: var(--glass); --bg-h: var(--surface); --fg: var(--ink); border-color: var(--rule-2); box-shadow: var(--shadow); }
.btn-ghost:hover{ border-color: var(--ink-4); box-shadow: 0 0 0 1px rgba(15,18,34,.04), var(--shadow); }
:root[data-theme="dark"] .btn:not(.btn-blue):not(.btn-ghost){ --bg:#f2f3f8; --bg-h:#fff; --fg:#0f1222; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn:not(.btn-blue):not(.btn-ghost){ --bg:#f2f3f8; --bg-h:#fff; --fg:#0f1222; } }

/* CopInk (green / white) and Ink Mentor (purple / white) */
.pill{
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 999px; font: 600 14px/1 var(--ff); text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.pill:active{ transform: scale(.97); }
.pill i{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: background-color .15s var(--ease); }
.pill-cop{ background: var(--cop); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.pill-cop i{ background: #fff; }
.pill-cop:hover{ background: var(--cop-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px rgba(var(--cop-rgb), .35); }
.pill-mentor{ background: var(--mentor); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.pill-mentor i{ background: #fff; }
.pill-mentor:hover{ background: var(--mentor-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px rgba(var(--mentor-rgb), .35); }

/* The black / white switch: a moon in white mode, a sun in black */
.mode{
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--rule-2); color: var(--ink-2);
  transition: color .1s cubic-bezier(0,0,.2,1), background-color .15s ease-out, border-color .15s ease-out;
}
.mode:hover{ color: var(--ink); background: rgba(var(--ink-rgb), .06); }
.mode:active{ transform: scale(.95); }
.mode svg{ grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
           transition: opacity .2s ease-out, transform .3s var(--out); }
.mode .i-sun{ opacity: 0; transform: rotate(-60deg) scale(.6); }
:root.is-dark .mode .i-moon{ opacity: 0; transform: rotate(60deg) scale(.6); }
:root.is-dark .mode .i-sun{ opacity: 1; transform: none; }

/* ── Top bar ────────────────────────────────────────────────────────── */
.top{
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .2s ease-out;
}
.scrolled .top{ border-bottom-color: var(--rule); }
.top-in{
  height: 68px; padding: 0 clamp(16px, 2.4vw, 32px);   /* full width: the logo sits at the left edge, the buttons at the right */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.brand{ justify-self: start; display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--ff); }
.brand-mark{ width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #4d8bff, #1d4fd8); display: grid; place-items: center; }
.brand-mark svg{ width: 30px; height: 30px; fill: #fff; }
.brand .stop{ color: var(--press); }

/* The switcher, as backtrader.io does its top links: plain words, and
   one soft highlight that slides to whichever one the pointer is on
   (left, width, opacity over .2s, ease-out) and fades when it leaves.
   Here it comes to rest on the open tab instead of vanishing. */
.switch{ position: relative; display: flex; gap: 4px; }
.switch button{
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: 500 14px/1 var(--ff); letter-spacing: -0.01em; color: var(--ink-3);
  height: 32px; padding: 0 12px; border-radius: 7px; white-space: nowrap;
  transition: color .1s cubic-bezier(0,0,.2,1);
}
.switch button:hover, .switch button[aria-selected="true"]{ color: var(--ink); }
.switch-link{ position: relative; z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px;
  font: 500 14px/1 var(--ff); letter-spacing: -0.01em; color: var(--ink-3); text-decoration: none; white-space: nowrap;
  transition: color .1s cubic-bezier(0,0,.2,1); }
.switch-link:hover{ color: var(--ink); }
.switch .knob{
  position: absolute; z-index: 0; top: 50%; left: 0; width: 0; height: 32px; border-radius: 7px;
  background: rgba(var(--ink-rgb), .07); transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: left .2s ease-out, width .2s ease-out, opacity .2s ease-out;
}
.switch .knob.show{ opacity: 1; }
.products{ justify-self: end; display: flex; align-items: center; gap: 8px; }

/* ── Views ──────────────────────────────────────────────────────────── */
main{ position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
main > .view.on{ flex: 1; }
.view{
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px var(--gutter) 64px; text-align: center;
}
.view.on{ display: flex; animation: view-in .5s var(--out) both; }
@keyframes view-in{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

.badge{
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px; margin-bottom: 26px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--rule); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.badge b{ font-size: 11px; font-weight: 700; color: #fff; background: var(--press); padding: 4px 8px; border-radius: 999px; letter-spacing: .02em; }
.hero h1{ font-size: clamp(42px, 7.4vw, 92px); font-weight: 650; letter-spacing: -0.05em; line-height: .98; }
.hero h1 em{ font-style: normal; color: var(--press); }
.hero p{ font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-3); margin: 22px auto 34px; max-width: 34ch; }
.ctas{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.view-head{ margin-bottom: 36px; }
.view-head h2{ font-size: clamp(34px, 4.6vw, 54px); font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.view-head p{ color: var(--ink-3); margin-top: 12px; font-size: 16px; }

/* ── Cards: they hold still on hover (only buttons inside respond) ─── */
.card{
  position: relative; overflow: hidden; text-align: left;
  background: var(--glass); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow);
}

/* Plans */
.plans{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 980px; }
.plan{ padding: 26px; display: flex; flex-direction: column; min-height: 300px; }
.plan-top{ display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.plan-price{ margin: 22px 0 6px; font-size: 46px; font-weight: 650; letter-spacing: -0.05em; line-height: 1; }
.plan-price small{ font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); margin-left: 4px; }
.plan-line{ font-size: 14.5px; color: var(--ink-3); }
.plan .btn{ margin-top: auto; width: 100%; }

/* Documentation and Contact: link tiles */
.tiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 980px; }
.tiles-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
.tile{ padding: 22px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); min-height: 168px; }
.tile .ico{
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--press-rgb), .09); color: var(--press);
}
.tile .ico svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile h3{ font-size: 17px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; margin-top: auto; }
.tile p{ font-size: 14px; color: var(--ink-3); margin-top: -8px; }

/* ── Home: the hero fills the first screen, the film sits below ───── */
.view-home{ padding: 0; justify-content: flex-start; }
.hero{
  position: relative; width: 100%; min-height: calc(100svh - 68px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px var(--gutter) 96px;
}
.cue{
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-decoration: none;
  background: none; border: 0; cursor: pointer; font-family: var(--ff);
  transition: color .1s cubic-bezier(0,0,.2,1);
}
.cue:hover{ color: var(--ink); }
.cue svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.film{ width: 100%; max-width: 1080px; padding: 0 var(--gutter) clamp(64px, 9vw, 120px); scroll-margin-top: 84px; }
.film-frame{
  position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #e9eefc, #f6f8ff 50%, #e4eafb);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  display: grid; place-items: center; width: 100%; padding: 0; cursor: pointer; font-family: var(--ff);
  transition: border-color .15s ease-out;
}
.film-frame:hover{ border-color: var(--rule-2); }
.film-frame:hover .big{ color: #fff; background: var(--press); }
.film-frame video, .film-frame img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-soon{ display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink-3); font-size: 14px; }
.film-soon .big{
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--press); box-shadow: var(--shadow-lg);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.film-soon .big svg{ width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
:root[data-theme="dark"] .film-frame{ background: linear-gradient(135deg, #10152a, #0c0f1c 50%, #121a33); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .film-frame{ background: linear-gradient(135deg, #10152a, #0c0f1c 50%, #121a33); } }

/* ── The film, full screen ──────────────────────────────────────── */
.theatre{
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(12px, 4vw, 56px);
  background: rgba(5,6,10,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s ease-out;
}
.theatre[hidden]{ display: none; }
.theatre.on{ opacity: 1; }
.theatre-stage{
  width: min(100%, calc((100vh - 2 * clamp(12px, 4vw, 56px)) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #0c0f1c; display: grid; place-items: center;
  transform: scale(.96); transition: transform .4s var(--out);
}
.theatre.on .theatre-stage{ transform: none; }
.theatre-stage video{ width: 100%; height: 100%; object-fit: contain; background: #000; }
.theatre-stage .film-soon{ color: rgba(255,255,255,.7); }
.theatre-x{
  position: absolute; top: 16px; right: 16px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; transition: background-color .15s ease-out;
}
.theatre-x:hover{ background: rgba(255,255,255,.2); }
.theatre-x svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theatre:fullscreen{ padding: 0; background: #000; }
.theatre:fullscreen .theatre-stage{ width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

/* ── Footer line ───────────────────────────────────────────────────── */
.foot{
  position: relative; z-index: 1; padding: 18px var(--gutter) 22px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .top-in{ grid-template-columns: auto 1fr; height: auto; padding-top: 12px; padding-bottom: 8px; row-gap: 12px; }
  .switch{ grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .plans, .tiles{ grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .tiles-2{ max-width: 460px; }
  .plan{ min-height: 0; }
  .plan .btn{ margin-top: 22px; }
  .tile{ min-height: 0; }
  .tile h3{ margin-top: 0; }
  .view{ justify-content: flex-start; padding-top: 48px; }
  .view-home{ padding-top: 0; }
  .hero{ min-height: calc(100svh - 112px); }
  .film-frame{ border-radius: 16px; }
}
@media (max-width: 480px){
  .top-in{ column-gap: 8px; }
  .brand > span:last-child{ display: none; }
  .products{ gap: 6px; }
  .pill{ height: 34px; padding: 0 12px; font-size: 13.5px; }
  .pill i{ display: none; }
  .mode{ width: 34px; height: 34px; }
  .switch{ width: 100%; }
  .switch button, .switch-link{ flex: 1; justify-content: center; padding: 0 8px; font-size: 13.5px; }
  .ctas .btn{ flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* the arrows inside a tile stay put too */
.tile:hover .arrow .chev, .tile:hover .arrow .stem{ transform: translateX(-3px); }
.tile:hover .arrow .stem{ stroke-dashoffset: 10; }