/* ==========================================================================
   Flowboard design tokens
   Brand: Gulf teal + sand gold on cool slate neutrals.
   Accent ramps (labels, covers, lists) follow the "recommended implementation
   values" in the Flowboard specification §14, which are Atlassian Design System
   token values. They are NOT official Trello values; Trello does not publish hex values.
   ========================================================================== */

:root {
  /* Type */
  --fb-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
  --fb-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans", sans-serif;
  --fb-font-mono: "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;
  --fb-fs-display: 1.75rem;   /* 28/32 */
  --fb-fs-h1: 1.5rem;         /* 24/28 */
  --fb-fs-h2: 1.25rem;        /* 20/24 */
  --fb-fs-h3: 1rem;           /* 16/20 */
  --fb-fs-h4: .875rem;        /* 14/20 */
  --fb-fs-body: .875rem;      /* 14/20 */
  --fb-fs-small: .75rem;      /* 12/16 */
  --fb-fs-caption: .6875rem;  /* 11/14 */
  --fb-lh-tight: 1.2; --fb-lh: 1.43;
  --fb-fw-regular: 400; --fb-fw-medium: 500; --fb-fw-semibold: 600; --fb-fw-bold: 700;

  /* Space (4px base) */
  --fb-s-0: 0; --fb-s-050: 2px; --fb-s-1: 4px; --fb-s-150: 6px; --fb-s-2: 8px; --fb-s-3: 12px; --fb-s-4: 16px;
  --fb-s-5: 20px; --fb-s-6: 24px; --fb-s-8: 32px; --fb-s-10: 40px; --fb-s-12: 48px; --fb-s-16: 64px;

  /* Radius */
  --fb-r-xs: 2px; --fb-r-sm: 4px; --fb-r-md: 6px; --fb-r-lg: 8px; --fb-r-xl: 12px; --fb-r-2xl: 16px; --fb-r-full: 999px;
  --fb-r-card: var(--fb-r-lg); --fb-r-list: var(--fb-r-xl); --fb-r-btn: var(--fb-r-md);
  --fb-r-input: var(--fb-r-md); --fb-r-pop: var(--fb-r-lg); --fb-r-modal: var(--fb-r-xl); --fb-r-label: var(--fb-r-sm);

  /* Layout */
  --fb-header-h: 52px; --fb-board-header-h: 52px; --fb-list-w: 272px; --fb-popover-w: 304px;
  --fb-sidebar-w: 280px; --fb-cardback-w: 880px;

  /* Motion */
  --fb-ease: cubic-bezier(.2, .8, .2, 1); --fb-dur-fast: 120ms; --fb-dur: 180ms; --fb-dur-slow: 260ms;

  /* Brand constants (same in both themes) */
  --fb-sand: #C9A04A; --fb-sand-soft: #F3E6C7; --fb-teal-900: #0A3F43;
}

/* ---------- Light theme ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --fb-bg: #F3F5F6;               /* app background */
  --fb-surface: #FFFFFF;
  --fb-surface-2: #F7F9FA;        /* secondary surface */
  --fb-surface-sunken: #EDF1F3;
  --fb-surface-raised: #FFFFFF;   /* cards */
  --fb-surface-overlay: #FFFFFF;  /* popovers, modals */
  --fb-list-bg: #EEF1F3;

  --fb-text: #1B2A31;
  --fb-text-2: #4A5B63;
  --fb-text-muted: #6A7A82;
  --fb-text-disabled: #A3AFB5;
  --fb-text-inverse: #FFFFFF;
  --fb-link: #0B6B69;

  --fb-border: #DCE3E6;
  --fb-border-strong: #B9C5CA;
  --fb-border-input: #9AA8AF;
  --fb-focus: #2F8F8A;

  --fb-primary: #0E6D6A; --fb-primary-hover: #0B5B59; --fb-primary-active: #094A4A; --fb-on-primary: #FFFFFF;
  --fb-primary-soft: #E3F2F1; --fb-primary-soft-hover: #CFE8E6;
  --fb-secondary: rgba(12, 37, 44, .06); --fb-secondary-hover: rgba(12, 37, 44, .11); --fb-secondary-active: rgba(12, 37, 44, .16);
  --fb-subtle-hover: rgba(12, 37, 44, .06); --fb-subtle-active: rgba(12, 37, 44, .11);
  --fb-accent: #B98A2F; --fb-accent-soft: #FBF1DC;

  --fb-selected: #E3F2F1; --fb-selected-hover: #CFE8E6; --fb-selected-border: #0E6D6A;
  --fb-disabled: rgba(12, 37, 44, .06);

  --fb-success: #2E7D32; --fb-success-bg: #E8F5E9; --fb-success-text: #1E5E22; --fb-success-bold: #5B7F24;
  --fb-warning: #B35C00; --fb-warning-bg: #FFF4DC; --fb-warning-text: #7A4A00; --fb-warning-bold: #F5B82E;
  --fb-danger: #C9372C;  --fb-danger-bg: #FFECEB;  --fb-danger-text: #AE2E24;  --fb-danger-hover: #AE2E24;
  --fb-info: #1868DB;    --fb-info-bg: #E9F2FE;    --fb-info-text: #1558BC;

  --fb-shadow-raised: 0 1px 1px rgba(16, 38, 45, .16), 0 0 1px rgba(16, 38, 45, .24);
  --fb-shadow-hover: 0 2px 4px rgba(16, 38, 45, .14), 0 0 1px rgba(16, 38, 45, .3);
  --fb-shadow-overlay: 0 8px 16px rgba(16, 38, 45, .16), 0 0 1px rgba(16, 38, 45, .3);
  --fb-shadow-drag: 0 12px 24px rgba(16, 38, 45, .22), 0 0 1px rgba(16, 38, 45, .3);
  --fb-blanket: rgba(9, 20, 26, .5);

  --fb-header-bg: #FFFFFF; --fb-header-border: #DCE3E6;
  --fb-chart-grid: #E3E8EB;

  /* Accent ramps: subtlest / subtler(light) / subtle(normal) / bolder(dark) / text / text-bolder */
  --c-green-0: #DCFFF1;  --c-green-1: #BAF3DB;  --c-green-2: #4BCE97;  --c-green-3: #1F845A;  --c-green-t: #216E4E;  --c-green-tb: #164B35;
  --c-yellow-0: #FEF7C8; --c-yellow-1: #F5E989; --c-yellow-2: #EED12B; --c-yellow-3: #946F00; --c-yellow-t: #7F5F01; --c-yellow-tb: #533F04;
  --c-orange-0: #FFF5DB; --c-orange-1: #FCE4A6; --c-orange-2: #FCA700; --c-orange-3: #BD5B00; --c-orange-t: #9E4C00; --c-orange-tb: #693200;
  --c-red-0: #FFECEB;    --c-red-1: #FFD5D2;    --c-red-2: #F87168;    --c-red-3: #C9372C;    --c-red-t: #AE2E24;    --c-red-tb: #5D1F1A;
  --c-purple-0: #F8EEFE; --c-purple-1: #EED7FC; --c-purple-2: #C97CF4; --c-purple-3: #964AC0; --c-purple-t: #803FA5; --c-purple-tb: #48245D;
  --c-blue-0: #E9F2FE;   --c-blue-1: #CFE1FD;   --c-blue-2: #669DF1;   --c-blue-3: #1868DB;   --c-blue-t: #1558BC;   --c-blue-tb: #123263;
  --c-sky-0: #E7F9FF;    --c-sky-1: #C6EDFB;    --c-sky-2: #6CC3E0;    --c-sky-3: #227D9B;    --c-sky-t: #206A83;    --c-sky-tb: #164555;
  --c-lime-0: #EFFFD6;   --c-lime-1: #D3F1A7;   --c-lime-2: #94C748;   --c-lime-3: #5B7F24;   --c-lime-t: #4C6B1F;   --c-lime-tb: #37471F;
  --c-pink-0: #FFECF8;   --c-pink-1: #FDD0EC;   --c-pink-2: #E774BB;   --c-pink-3: #AE4787;   --c-pink-t: #943D73;   --c-pink-tb: #50253F;
  --c-black-0: #F0F1F2;  --c-black-1: #DDDEE1;  --c-black-2: #8C8F97;  --c-black-3: #6B6E76;  --c-black-t: #505258;  --c-black-tb: #1E1F21;
  --c-on-bold: #FFFFFF;
}

/* ---------- Dark theme (designed, not inverted) ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --fb-bg: #0F1417;
  --fb-surface: #161C20;
  --fb-surface-2: #1B2226;
  --fb-surface-sunken: #11171A;
  --fb-surface-raised: #222A30;
  --fb-surface-overlay: #252E34;
  --fb-list-bg: #12181B;

  --fb-text: #DDE5E8;
  --fb-text-2: #AAB7BD;
  --fb-text-muted: #8796A0;
  --fb-text-disabled: #5A676E;
  --fb-text-inverse: #0F1417;
  --fb-link: #5CC8BE;

  --fb-border: #2B353B;
  --fb-border-strong: #3C4850;
  --fb-border-input: #5D6B73;
  --fb-focus: #6ED3C9;

  --fb-primary: #3DB8AD; --fb-primary-hover: #5CC8BE; --fb-primary-active: #7FD6CE; --fb-on-primary: #06201E;
  --fb-primary-soft: #16302F; --fb-primary-soft-hover: #1C3D3B;
  --fb-secondary: rgba(206, 224, 230, .08); --fb-secondary-hover: rgba(206, 224, 230, .14); --fb-secondary-active: rgba(206, 224, 230, .2);
  --fb-subtle-hover: rgba(206, 224, 230, .07); --fb-subtle-active: rgba(206, 224, 230, .13);
  --fb-accent: #E2BE6C; --fb-accent-soft: #3A2F18;

  --fb-selected: #16302F; --fb-selected-hover: #1C3D3B; --fb-selected-border: #3DB8AD;
  --fb-disabled: rgba(206, 224, 230, .08);

  --fb-success: #7FC17F; --fb-success-bg: #1C2B1D; --fb-success-text: #A6D8A6; --fb-success-bold: #94C748;
  --fb-warning: #F5B82E; --fb-warning-bg: #3A2C1F; --fb-warning-text: #FBC828; --fb-warning-bold: #F5B82E;
  --fb-danger: #F87168;  --fb-danger-bg: #42221F;  --fb-danger-text: #FD9891; --fb-danger-hover: #FD9891;
  --fb-info: #669DF1;    --fb-info-bg: #1C2B42;    --fb-info-text: #8FB8F6;

  --fb-shadow-raised: 0 1px 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .5);
  --fb-shadow-hover: 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  --fb-shadow-overlay: 0 0 0 1px rgba(189, 205, 212, .12), 0 8px 16px rgba(0, 0, 0, .45);
  --fb-shadow-drag: 0 0 0 1px rgba(189, 205, 212, .12), 0 14px 28px rgba(0, 0, 0, .55);
  --fb-blanket: rgba(3, 8, 10, .66);

  --fb-header-bg: #131A1E; --fb-header-border: #232C31;
  --fb-chart-grid: #2B353B;

  --c-green-0: #1C3329;  --c-green-1: #164B35;  --c-green-2: #216E4E;  --c-green-3: #4BCE97;  --c-green-t: #7EE2B8;  --c-green-tb: #BAF3DB;
  --c-yellow-0: #332E1B; --c-yellow-1: #533F04; --c-yellow-2: #7F5F01; --c-yellow-3: #DDB30E; --c-yellow-t: #EED12B; --c-yellow-tb: #F5E989;
  --c-orange-0: #3A2C1F; --c-orange-1: #693200; --c-orange-2: #9E4C00; --c-orange-3: #FCA700; --c-orange-t: #FBC828; --c-orange-tb: #FCE4A6;
  --c-red-0: #42221F;    --c-red-1: #5D1F1A;    --c-red-2: #AE2E24;    --c-red-3: #F87168;    --c-red-t: #FD9891;    --c-red-tb: #FFD5D2;
  --c-purple-0: #35243F; --c-purple-1: #48245D; --c-purple-2: #803FA5; --c-purple-3: #C97CF4; --c-purple-t: #D8A0F7; --c-purple-tb: #EED7FC;
  --c-blue-0: #1C2B42;   --c-blue-1: #123263;   --c-blue-2: #1558BC;   --c-blue-3: #669DF1;   --c-blue-t: #8FB8F6;   --c-blue-tb: #CFE1FD;
  --c-sky-0: #1E3137;    --c-sky-1: #164555;    --c-sky-2: #206A83;    --c-sky-3: #6CC3E0;    --c-sky-t: #9DD9EE;    --c-sky-tb: #C6EDFB;
  --c-lime-0: #28311B;   --c-lime-1: #37471F;   --c-lime-2: #4C6B1F;   --c-lime-3: #94C748;   --c-lime-t: #B3DF72;   --c-lime-tb: #D3F1A7;
  --c-pink-0: #3D2232;   --c-pink-1: #50253F;   --c-pink-2: #943D73;   --c-pink-3: #E774BB;   --c-pink-t: #F797D2;   --c-pink-tb: #FDD0EC;
  --c-black-0: #303134;  --c-black-1: #4B4D51;  --c-black-2: #63666B;  --c-black-3: #96999E;  --c-black-t: #A9ABAF;  --c-black-tb: #E2E3E4;
  --c-on-bold: #121416;
}

/* ---------- Label colours (30 + colourless) ----------
   light = subtler, normal = subtle, dark = bolder. Text uses text-bolder on light/normal, on-bold on dark. */
.lb { --lb-bg: var(--c-black-0); --lb-fg: var(--fb-text-2); }
.lb-green_light{--lb-bg:var(--c-green-1);--lb-fg:var(--c-green-tb)} .lb-green{--lb-bg:var(--c-green-2);--lb-fg:var(--c-green-tb)} .lb-green_dark{--lb-bg:var(--c-green-3);--lb-fg:var(--c-on-bold)}
.lb-yellow_light{--lb-bg:var(--c-yellow-1);--lb-fg:var(--c-yellow-tb)} .lb-yellow{--lb-bg:var(--c-yellow-2);--lb-fg:var(--c-yellow-tb)} .lb-yellow_dark{--lb-bg:var(--c-yellow-3);--lb-fg:var(--c-on-bold)}
.lb-orange_light{--lb-bg:var(--c-orange-1);--lb-fg:var(--c-orange-tb)} .lb-orange{--lb-bg:var(--c-orange-2);--lb-fg:var(--c-orange-tb)} .lb-orange_dark{--lb-bg:var(--c-orange-3);--lb-fg:var(--c-on-bold)}
.lb-red_light{--lb-bg:var(--c-red-1);--lb-fg:var(--c-red-tb)} .lb-red{--lb-bg:var(--c-red-2);--lb-fg:var(--c-red-tb)} .lb-red_dark{--lb-bg:var(--c-red-3);--lb-fg:var(--c-on-bold)}
.lb-purple_light{--lb-bg:var(--c-purple-1);--lb-fg:var(--c-purple-tb)} .lb-purple{--lb-bg:var(--c-purple-2);--lb-fg:var(--c-purple-tb)} .lb-purple_dark{--lb-bg:var(--c-purple-3);--lb-fg:var(--c-on-bold)}
.lb-blue_light{--lb-bg:var(--c-blue-1);--lb-fg:var(--c-blue-tb)} .lb-blue{--lb-bg:var(--c-blue-2);--lb-fg:var(--c-blue-tb)} .lb-blue_dark{--lb-bg:var(--c-blue-3);--lb-fg:var(--c-on-bold)}
.lb-sky_light{--lb-bg:var(--c-sky-1);--lb-fg:var(--c-sky-tb)} .lb-sky{--lb-bg:var(--c-sky-2);--lb-fg:var(--c-sky-tb)} .lb-sky_dark{--lb-bg:var(--c-sky-3);--lb-fg:var(--c-on-bold)}
.lb-lime_light{--lb-bg:var(--c-lime-1);--lb-fg:var(--c-lime-tb)} .lb-lime{--lb-bg:var(--c-lime-2);--lb-fg:var(--c-lime-tb)} .lb-lime_dark{--lb-bg:var(--c-lime-3);--lb-fg:var(--c-on-bold)}
.lb-pink_light{--lb-bg:var(--c-pink-1);--lb-fg:var(--c-pink-tb)} .lb-pink{--lb-bg:var(--c-pink-2);--lb-fg:var(--c-pink-tb)} .lb-pink_dark{--lb-bg:var(--c-pink-3);--lb-fg:var(--c-on-bold)}
.lb-black_light{--lb-bg:var(--c-black-1);--lb-fg:var(--c-black-tb)} .lb-black{--lb-bg:var(--c-black-2);--lb-fg:var(--c-on-bold)} .lb-black_dark{--lb-bg:var(--c-black-3);--lb-fg:var(--c-on-bold)}
[data-theme="dark"] .lb-black{--lb-fg:var(--c-black-tb)}
.lb-none{--lb-bg:var(--c-black-0);--lb-fg:var(--fb-text-2)}

/* Colourblind patterns: one pattern per family (spec §14.2) */
.cb-mode .lb::after, .cb-mode .cover-pat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .38; mix-blend-mode: multiply; }
[data-theme="dark"] .cb-mode .lb::after, [data-theme="dark"] .cb-mode .cover-pat::after { mix-blend-mode: screen; opacity: .3; }
.cb-mode [class*="lb-green"]::after, .cb-mode .cv-green::after { background: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 6px); }
.cb-mode [class*="lb-yellow"]::after, .cb-mode .cv-yellow::after { background: radial-gradient(currentColor 1.2px, transparent 1.4px) 0 0 / 6px 6px; }
.cb-mode [class*="lb-orange"]::after, .cb-mode .cv-orange::after { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px); }
.cb-mode [class*="lb-red"]::after, .cb-mode .cv-red::after { background: repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 5px); }
.cb-mode [class*="lb-purple"]::after, .cb-mode .cv-purple::after { background: radial-gradient(circle at 50% 100%, transparent 3px, currentColor 3.5px 4.2px, transparent 4.5px) 0 0 / 9px 6px; }
.cb-mode [class*="lb-blue"]::after, .cb-mode .cv-blue::after { background: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 6px); }
.cb-mode [class*="lb-sky"]::after, .cb-mode .cv-sky::after { background: conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 0 / 8px 8px; }
.cb-mode [class*="lb-lime"]::after, .cb-mode .cv-lime::after { background: linear-gradient(135deg, currentColor 25%, transparent 25%) 0 0 / 8px 8px; }
.cb-mode [class*="lb-pink"]::after, .cb-mode .cv-pink::after { background: radial-gradient(circle, transparent 1.6px, currentColor 2px 2.6px, transparent 3px) 0 0 / 8px 8px; }
.cb-mode [class*="lb-black"]::after, .cb-mode .cv-black::after { background: linear-gradient(90deg, transparent 70%, currentColor 70% 78%, transparent 78%); }

/* ---------- Cover colours (10) ---------- */
.cv-green{--cv:var(--c-green-2)} .cv-yellow{--cv:var(--c-yellow-2)} .cv-orange{--cv:var(--c-orange-2)} .cv-red{--cv:var(--c-red-2)} .cv-purple{--cv:var(--c-purple-2)}
.cv-blue{--cv:var(--c-blue-2)} .cv-sky{--cv:var(--c-sky-2)} .cv-lime{--cv:var(--c-lime-2)} .cv-pink{--cv:var(--c-pink-2)} .cv-black{--cv:var(--c-black-2)}
[data-theme="dark"] .cv-green{--cv:var(--c-green-3)} [data-theme="dark"] .cv-yellow{--cv:var(--c-yellow-3)} [data-theme="dark"] .cv-orange{--cv:var(--c-orange-3)}
[data-theme="dark"] .cv-red{--cv:var(--c-red-3)} [data-theme="dark"] .cv-purple{--cv:var(--c-purple-3)} [data-theme="dark"] .cv-blue{--cv:var(--c-blue-3)}
[data-theme="dark"] .cv-sky{--cv:var(--c-sky-3)} [data-theme="dark"] .cv-lime{--cv:var(--c-lime-3)} [data-theme="dark"] .cv-pink{--cv:var(--c-pink-3)} [data-theme="dark"] .cv-black{--cv:var(--c-black-3)}

/* ---------- List colours (10 + none) ---------- */
.lc-gray{--lc-bg:var(--c-black-1);--lc-fg:var(--c-black-t)} .lc-green{--lc-bg:var(--c-green-1);--lc-fg:var(--c-green-t)} .lc-yellow{--lc-bg:var(--c-yellow-1);--lc-fg:var(--c-yellow-t)}
.lc-orange{--lc-bg:var(--c-orange-1);--lc-fg:var(--c-orange-t)} .lc-red{--lc-bg:var(--c-red-1);--lc-fg:var(--c-red-t)} .lc-purple{--lc-bg:var(--c-purple-1);--lc-fg:var(--c-purple-t)}
.lc-blue{--lc-bg:var(--c-blue-1);--lc-fg:var(--c-blue-t)} .lc-sky{--lc-bg:var(--c-sky-1);--lc-fg:var(--c-sky-t)} .lc-lime{--lc-bg:var(--c-lime-1);--lc-fg:var(--c-lime-t)} .lc-pink{--lc-bg:var(--c-pink-1);--lc-fg:var(--c-pink-t)}
[data-theme="dark"] .lc-gray{--lc-bg:var(--c-black-0)} [data-theme="dark"] .lc-green{--lc-bg:var(--c-green-0)} [data-theme="dark"] .lc-yellow{--lc-bg:var(--c-yellow-0)}
[data-theme="dark"] .lc-orange{--lc-bg:var(--c-orange-0)} [data-theme="dark"] .lc-red{--lc-bg:var(--c-red-0)} [data-theme="dark"] .lc-purple{--lc-bg:var(--c-purple-0)}
[data-theme="dark"] .lc-blue{--lc-bg:var(--c-blue-0)} [data-theme="dark"] .lc-sky{--lc-bg:var(--c-sky-0)} [data-theme="dark"] .lc-lime{--lc-bg:var(--c-lime-0)} [data-theme="dark"] .lc-pink{--lc-bg:var(--c-pink-0)}

/* ---------- Board backgrounds (fixed in both themes) ---------- */
.bg-color-blue{background:#1868DB} .bg-color-orange{background:#BD5B00} .bg-color-green{background:#1F845A} .bg-color-red{background:#C9372C}
.bg-color-purple{background:#964AC0} .bg-color-pink{background:#AE4787} .bg-color-lime{background:#5B7F24} .bg-color-sky{background:#227D9B} .bg-color-grey{background:#6B6E76}
/* Flowboard gradients (enhancement; Trello gradient set unverified) */
.bg-gradient-khaleej{background:linear-gradient(135deg,#0A4E54 0%,#0E6D6A 45%,#2C8C83 75%,#B98A2F 130%)}
.bg-gradient-ocean{background:linear-gradient(135deg,#1558BC 0%,#227D9B 60%,#6CC3E0 120%)}
.bg-gradient-sunset{background:linear-gradient(135deg,#943D73 0%,#BD5B00 70%,#E0A23A 120%)}
.bg-gradient-forest{background:linear-gradient(135deg,#164B35 0%,#1F845A 60%,#94C748 130%)}
.bg-gradient-dusk{background:linear-gradient(135deg,#352C63 0%,#964AC0 65%,#1868DB 130%)}
.bg-gradient-dune{background:linear-gradient(160deg,#7A5424 0%,#B98A2F 55%,#E9CF94 120%)}
.bg-gradient-midnight{background:linear-gradient(135deg,#0B1320 0%,#1B2A44 60%,#2F4A6E 120%)}
.bg-gradient-snow{background:linear-gradient(135deg,#E9F2FE 0%,#F0F1F2 60%,#FFFFFF 120%)}
.bg-image{background-color:#1B2A31;background-position:center}