/* 360TechOcean visual system: polished surfaces, confident hierarchy, calm color. */
:root {
  --premium-ink: #14213b;
  --premium-muted: #65748d;
  --premium-blue: #315fe8;
  --premium-blue-dark: #244bc2;
  --premium-line: #e1e8f3;
  --premium-canvas: #f5f7fb;
  --premium-surface: #fff;
  --premium-shadow: 0 14px 38px rgb(28 48 87 / 6%), 0 2px 7px rgb(28 48 87 / 3%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--premium-ink);
  background: var(--premium-canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body { background: var(--premium-canvas); color: var(--premium-ink); }
button, input, select, textarea { font-family: inherit; }
::selection { background: #dce7ff; color: #173b9e; }

.dashboard-shell { background: var(--premium-canvas); }
.dashboard-sidebar {
  background: radial-gradient(ellipse at 20% 0%, #26385e 0, transparent 34%), linear-gradient(180deg, #111a2e 0%, #121c32 100%);
  box-shadow: 8px 0 30px rgb(16 28 50 / 9%);
}
.dashboard-sidebar__brand { padding: 25px 21px; border-bottom-color: rgb(255 255 255 / 8%); letter-spacing: -.035em; }
.dashboard-nav { gap: 5px; padding: 16px 12px; }
.dashboard-nav__item { min-height: 43px; border: 1px solid transparent; border-radius: 10px; color: #b7c2d5; transition: background .18s ease, color .18s ease, transform .18s ease; }
.dashboard-nav__item:not(.dashboard-nav__item--pending):hover { transform: translateX(2px); background: rgb(255 255 255 / 7%); color: #fff; }
.dashboard-nav__item.is-active { background: linear-gradient(115deg, #3d6cf1, #315bd8); box-shadow: 0 7px 18px rgb(37 87 214 / 28%); color: #fff; }
.dashboard-nav__icon { background: rgb(255 255 255 / 9%); }
.dashboard-nav__group { background: rgb(255 255 255 / 3%); }
.dashboard-nav__submenu { border-left-color: rgb(255 255 255 / 12%); }
.dashboard-nav__subitem:hover, .dashboard-nav__subitem.is-active { background: rgb(255 255 255 / 8%); }

.dashboard-main { background: var(--premium-canvas); }
.dashboard-header {
  min-height: 70px;
  padding: 0 clamp(18px, 2.5vw, 34px);
  border-bottom-color: rgb(219 227 239 / 85%);
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 3px 14px rgb(29 50 88 / 3%);
  backdrop-filter: blur(16px);
}
.dashboard-header__title { font-size: 19px; font-weight: 720; letter-spacing: -.035em; }
.dashboard-content { gap: 23px; padding: clamp(17px, 2.2vw, 30px); }
.dashboard-user { color: #33435e; }
.dashboard-user__avatar { box-shadow: 0 0 0 4px #edf2ff; }

.page { width: min(1240px, calc(100% - 48px)); }
.page-intro { padding-top: 58px; }
.page-intro h1, .login-heading h1 { color: #14213b; letter-spacing: -.055em; }
.page-intro__copy { color: var(--premium-muted); }
.card, .stat-card, .dashboard-card, .integration-card, .workspace-module-card,
.business-package-card, .module-card, .checkout-card {
  border-color: var(--premium-line);
  border-radius: 16px;
  background: var(--premium-surface);
  box-shadow: var(--premium-shadow);
}
.card, .stat-card, .integration-card, .workspace-module-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card:hover, .stat-card:hover, .integration-card:hover, .workspace-module-card:hover { border-color: #d2def2; box-shadow: 0 18px 42px rgb(28 48 87 / 9%), 0 3px 9px rgb(28 48 87 / 4%); }
.dashboard-card { overflow: hidden; }
.dashboard-card__header { min-height: 68px; padding: 16px 22px; }
.dashboard-card__title, .card__title { color: #1c2b46; font-size: 15px; font-weight: 740; }
.dashboard-card__description, .card__description { color: #71809a; }
.dashboard-stats { gap: 16px; }
.stat-card { padding: 21px; }
.stat-label { color: #75839b; font-weight: 600; }
.stat-value { color: #182a49; font-size: 28px; }

/* Stronger page-level treatment for the custom screens used across the workspace. */
.dashboard-content > section,
.dashboard-content > article,
.dashboard-content > .card,
.dashboard-content > [class*="-panel"],
.dashboard-content > [class*="-section"] {
  border-color: #dfe7f3;
  border-radius: 17px;
  box-shadow: var(--premium-shadow);
}
.dashboard-content h1, .dashboard-content h2, .dashboard-content h3 { letter-spacing: -.035em; }
.dashboard-content h1 { color: #14213b; font-size: clamp(25px, 2.4vw, 34px); }
.dashboard-content h2 { color: #192b49; }
.dashboard-content p { line-height: 1.65; }
.dashboard-content [class*="__hero"],
.dashboard-content [class*="-hero"],
.dashboard-content [class*="__header"]:not(.dashboard-header__title) {
  border-radius: 15px;
}
.dashboard-content [class*="-card"],
.dashboard-content [class*="__card"],
.dashboard-content [class*="-panel"] {
  border-color: #e0e7f2;
  border-radius: 13px;
  box-shadow: 0 6px 20px rgb(31 52 91 / 5%);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dashboard-content [class*="-card"]:hover,
.dashboard-content [class*="__card"]:hover {
  border-color: #c9d7f3;
  box-shadow: 0 12px 28px rgb(31 52 91 / 9%);
  transform: translateY(-2px);
}
.dashboard-content table { border-collapse: separate; border-spacing: 0; }
.dashboard-content table thead th { background: #f0f4fc; color: #566985; font-weight: 750; }
.dashboard-content table thead th:first-child { border-top-left-radius: 10px; }
.dashboard-content table thead th:last-child { border-top-right-radius: 10px; }
.dashboard-content table tbody tr:nth-child(even) { background: #fafbfe; }
.dashboard-content table tbody tr:hover { background: #f0f5ff; }
.dashboard-content button,
.dashboard-content a[class*="button"],
.dashboard-content [role="button"] {
  border-radius: 10px;
  font-weight: 700;
}
.dashboard-content input:not([type="checkbox"]):not([type="radio"]),
.dashboard-content select, .dashboard-content textarea {
  min-height: 42px;
  background: #fbfcff;
}
.dashboard-content .workspace-welcome,
.dashboard-content [class*="checkout-hero"],
.dashboard-content [class*="pricing-hero"] {
  border: 1px solid #d8e3fa;
  background: radial-gradient(ellipse at 88% 4%, rgb(185 204 255 / 52%), transparent 36%), linear-gradient(125deg, #eaf0ff 0%, #f8faff 48%, #fff 100%);
}

.button, .workspace-action, .dashboard-logout, button:not([class]) {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.button--primary, .workspace-action--primary {
  background: linear-gradient(115deg, #3869ed, #2d59d8);
  box-shadow: 0 6px 15px rgb(49 95 232 / 18%);
}
.button--primary:hover, .workspace-action--primary:hover { background: linear-gradient(115deg, #2f5fdf, #244dc8); box-shadow: 0 9px 20px rgb(49 95 232 / 25%); }
.button--outline, .workspace-action, .dashboard-logout { border-color: #d9e2f0; background: #fff; }
.button--outline:hover, .workspace-action:hover, .dashboard-logout:hover { border-color: #afc3ee; background: #f8faff; }
.button:active, .workspace-action:active { transform: translateY(1px); }
.button:disabled, button:disabled { cursor: not-allowed; box-shadow: none; }

.field__control, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: #d8e1ef;
  border-radius: 10px;
  background-color: #fff;
  color: #1e2e49;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field__control:hover, input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: #bdcce3; }
.field__control:focus, input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: #7295f2;
  outline: 0;
  box-shadow: 0 0 0 4px rgb(49 95 232 / 11%);
}
.field__label, label { color: #344560; }
.data-table th { background: #f5f8fd; color: #62728c; }
.data-table td, .data-table th { border-bottom-color: #e9eef6; }
.data-table tbody tr:hover { background: #f8faff; }
.alert { border-radius: 11px; }
.badge, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-secondary { border-radius: 999px; }

.workspace-welcome {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border-color: #dce5f5;
  border-radius: 18px;
  background: radial-gradient(ellipse at 93% 0%, rgb(221 231 255 / 74%), transparent 38%), linear-gradient(120deg, #f2f6ff 0%, #fff 70%);
  box-shadow: var(--premium-shadow);
}
.workspace-welcome h1 { letter-spacing: -.05em; }
.workspace-module-grid { gap: 16px; }
.workspace-module-card { min-height: 184px; padding: 21px; }
.workspace-module-card:hover { transform: translateY(-2px); }
.subscription-plan__expiry { border-radius: 9px; background: #eff4ff; }

/* Marketing site: product-led storytelling, with a vivid indigo and aqua identity. */
.landing-page { overflow: hidden; background: #fff; }
.landing-page .landing-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(66px, 8vw, 104px) 28px 72px;
  background: radial-gradient(ellipse at 78% 36%, rgb(49 95 232 / 44%), transparent 35%), radial-gradient(ellipse at 95% 100%, rgb(12 185 166 / 22%), transparent 38%), linear-gradient(118deg, #10172f 0%, #17264e 53%, #1e3470 100%);
}
.landing-page .landing-hero::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 15%) .75px, transparent .75px);
  background-size: 23px 23px;
  content: "";
  opacity: .18;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 15%, #000 100%);
}
.landing-page .landing-hero__inner { position: relative; z-index: 1; max-width: 1200px; gap: clamp(35px, 6vw, 82px); }
.landing-page .landing-hero h1 { max-width: 720px; font-size: clamp(42px, 6.2vw, 76px); }
.landing-page .landing-hero__copy > p:not(.pricing-eyebrow) { max-width: 630px; font-size: clamp(16px, 1.5vw, 19px); }
.landing-page .landing-hero__actions .price-card__cta { min-height: 50px; padding: 0 23px; border-radius: 11px; background: linear-gradient(115deg, #5d7cff, #4164ed); box-shadow: 0 9px 26px rgb(62 100 237 / 35%); color: #fff; }
.landing-page .landing-secondary-cta { min-height: 50px; border-radius: 11px; background: rgb(255 255 255 / 6%); backdrop-filter: blur(8px); }
.landing-page .landing-hero__points { gap: 9px; }
.landing-page .landing-hero__points span { border-color: rgb(255 255 255 / 13%); background: rgb(255 255 255 / 7%); }
.landing-page .landing-hero__visual { min-height: 370px; }
.landing-page .landing-chat-preview { width: min(100%, 450px); border: 1px solid rgb(255 255 255 / 75%); box-shadow: 0 36px 90px rgb(3 9 27 / 45%); transform: rotate(1.2deg); animation: landing-float 7s ease-in-out infinite; }
.landing-page .landing-hero__floating { right: -12px; bottom: 9px; padding: 15px 18px; box-shadow: 0 18px 42px rgb(5 14 35 / 24%); animation: landing-float 6s ease-in-out infinite reverse; }
.landing-page .landing-hero__floating::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #20c889; content: ""; }
.landing-page .landing-capability-strip { max-width: 1200px; gap: 14px; }
.landing-page .landing-capability-strip > div { min-height: 96px; align-content: center; padding: 19px 21px; border-radius: 15px; box-shadow: 0 14px 38px rgb(20 38 75 / 9%); }
.landing-page .landing-capability-strip span { color: #4d65df; }
.landing-impact { max-width: 1200px; margin: 0 auto; padding: 74px 24px 64px; }
.landing-impact__heading { max-width: 700px; margin-bottom: 25px; }
.landing-impact__heading h2 { margin: 0; color: #172340; font-size: clamp(27px, 3.5vw, 40px); letter-spacing: -.04em; line-height: 1.15; }
.landing-impact__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.landing-impact__stat { min-height: 190px; padding: 23px; border: 1px solid #e1e7f2; border-radius: 16px; background: linear-gradient(145deg, #fff, #f8faff); box-shadow: 0 10px 30px rgb(25 48 96 / 5%); }
.landing-impact__stat > strong { display: block; margin-bottom: 13px; background: linear-gradient(110deg, #405fe5, #09a986); background-clip: text; color: transparent; font-size: clamp(32px, 4vw, 45px); font-weight: 850; letter-spacing: -.05em; line-height: 1; }
.landing-impact__stat p { min-height: 54px; margin: 0 0 15px; color: #40516f; font-size: 14px; line-height: 1.55; }
.landing-impact__stat a { color: #66748c; font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.landing-impact__note { margin: 13px 0 0; color: #78859a; font-size: 11px; line-height: 1.5; }
.landing-platform-section { padding: 76px 24px 82px; background: linear-gradient(180deg, #f7f9ff 0%, #fff 100%); }
.landing-platform-section__heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.landing-platform-section__heading h2 { margin: 0 0 12px; color: #172340; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.05em; line-height: 1.1; }
.landing-platform-section__heading > p:last-child { margin: 0; color: #65748d; font-size: 15px; line-height: 1.7; }
.landing-platform-grid { display: grid; max-width: 1200px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 auto; }
.landing-platform-card { position: relative; display: grid; align-content: start; min-height: 224px; padding: 23px; overflow: hidden; border: 1px solid #e1e7f2; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgb(24 42 82 / 4%); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.landing-platform-card::after { position: absolute; right: -36px; bottom: -50px; width: 125px; height: 125px; border-radius: 50%; background: linear-gradient(145deg, rgb(70 102 235 / 7%), rgb(13 183 161 / 7%)); content: ""; }
.landing-platform-card:hover { transform: translateY(-4px); border-color: #cbd8f2; box-shadow: 0 20px 42px rgb(25 48 96 / 10%); }
.landing-platform-card__icon { display: grid; width: 43px; height: 43px; margin-bottom: 19px; place-items: center; border: 1px solid #e1e8ff; border-radius: 13px; background: linear-gradient(145deg, #eff2ff, #e9fbf8); color: #4a62dd; font-size: 22px; font-weight: 800; }
.landing-platform-card > small { color: #6679d9; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.landing-platform-card h3 { margin: 7px 0; color: #192746; font-size: 18px; letter-spacing: -.025em; }
.landing-platform-card p { margin: 0 0 18px; color: #687790; font-size: 12px; line-height: 1.65; }
.landing-platform-card a { position: relative; z-index: 1; width: fit-content; margin-top: auto; color: #435dd4; font-size: 11px; font-weight: 750; }
.landing-page .landing-modules { padding-top: 80px; padding-bottom: 84px; }
.landing-page .landing-module-card { position: relative; padding: 27px; border-color: #e0e7f3; border-radius: 17px; box-shadow: 0 10px 30px rgb(25 48 96 / 5%); transition: transform .2s ease, box-shadow .2s ease; }
.landing-page .landing-module-card:hover { transform: translateY(-4px); box-shadow: 0 22px 45px rgb(25 48 96 / 11%); }
.landing-page .landing-module-card__number { display: inline-grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #edf1ff; color: #4c61da; }
.landing-page .landing-module-card h3 { margin-top: 17px; color: #1a2947; font-size: 22px; }
.landing-page .landing-module-card p { color: #63738c; }
.landing-page .landing-module-card__features { gap: 11px; }
.landing-page .landing-module-card__features li { color: #455671; }
.landing-page .landing-use-cases__grid article { border-color: #e2e8f2; border-radius: 14px; box-shadow: 0 5px 17px rgb(25 48 96 / 3%); }
.landing-page .landing-workflow { max-width: 1200px; border: 1px solid #e0e8f5; background: radial-gradient(ellipse at 100% 0%, #e9edff 0, transparent 45%), linear-gradient(125deg, #f5f8ff, #fff); box-shadow: var(--premium-shadow); }
.landing-page .landing-workflow__steps div { border-radius: 13px; box-shadow: 0 4px 14px rgb(25 48 96 / 3%); }
.landing-page .landing-cta { padding: 72px 24px; background: radial-gradient(ellipse at 50% 130%, rgb(48 89 217 / 62%), transparent 58%), linear-gradient(120deg, #10172f, #182b56); }
.landing-page .landing-cta h2 { max-width: 780px; margin: 0 auto 12px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
.landing-page .landing-cta p:not(.pricing-eyebrow) { max-width: 620px; margin: 0 auto 23px; }
.landing-page .landing-cta .price-card__cta { min-height: 48px; padding: 0 22px; border-radius: 11px; background: #fff; color: #284ab4; }
.landing-page .landing-cta__secondary { display: inline-flex; min-height: 48px; align-items: center; padding: 0 14px; }
@keyframes landing-float { 0%, 100% { transform: translateY(0) rotate(1.2deg); } 50% { transform: translateY(-9px) rotate(-.2deg); } }

.login-page { background: #f3f6fb; }
.login-layout { min-height: 100vh; }
.login-aside { position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 15%, #2e4574 0, transparent 43%), linear-gradient(150deg, #111a2e 0%, #172746 100%); }
.login-aside::after { position: absolute; right: -140px; bottom: -180px; width: 420px; height: 420px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; box-shadow: 0 0 0 35px rgb(255 255 255 / 2%), 0 0 0 75px rgb(255 255 255 / 2%); content: ""; pointer-events: none; }
.login-aside__message { position: relative; z-index: 1; }
.login-main { background: radial-gradient(ellipse at 50% 0%, #eaf0ff 0, transparent 46%), #f7f9fc; }
.login-card .card__body { padding: clamp(25px, 4vw, 36px); }
.login-card { filter: drop-shadow(0 20px 32px rgb(26 43 74 / 8%)); }

/* Consistent controls on bespoke pages whose original CSS uses hand-picked colors. */
.dashboard-content .module-selection-card,
.dashboard-content .business-package-option,
.dashboard-content .business-package-card,
.dashboard-content .checkout-summary,
.dashboard-content .business-checkout-panel,
.dashboard-content .module-pricing-card,
.dashboard-content .pricing-card {
  border: 1px solid #dfe7f3;
  border-radius: 16px;
  background: linear-gradient(155deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 9px 26px rgb(31 52 91 / 6%);
}
.dashboard-content .is-selected,
.dashboard-content [aria-pressed="true"] {
  border-color: #5479ed;
  box-shadow: 0 0 0 3px rgb(71 111 231 / 12%), 0 12px 26px rgb(31 52 91 / 8%);
}
.dashboard-content :is(button, .button, [role="button"]):not(:disabled):hover {
  filter: saturate(1.08);
}
.dashboard-content a:not([class*="button"]):not(.dashboard-nav__item) {
  text-underline-offset: 3px;
}

.topbar { background: rgb(255 255 255 / 92%); backdrop-filter: blur(14px); }
.brand__mark { border-radius: 10px; box-shadow: 0 5px 12px rgb(49 95 232 / 22%); }
.component-grid { gap: 20px; }
.popup { border-radius: 18px; box-shadow: 0 26px 80px rgb(13 25 48 / 24%); }

@keyframes premium-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.dashboard-content > *, .page > *, .json-page__content > * { animation: premium-enter .35s ease both; }
.dashboard-content > *:nth-child(2), .page > *:nth-child(2) { animation-delay: .035s; }
.dashboard-content > *:nth-child(3), .page > *:nth-child(3) { animation-delay: .07s; }

@media (max-width: 1050px) {
  .dashboard-header { min-height: 64px; }
  .dashboard-content { padding: 20px; }
}
@media (max-width: 700px) {
  .dashboard-sidebar { box-shadow: 0 5px 18px rgb(16 28 50 / 12%); }
  .dashboard-nav { scrollbar-width: thin; }
  .dashboard-content { gap: 16px; padding: 14px 12px 22px; }
  .dashboard-header { padding: 0 14px; }
  .page { width: calc(100% - 28px); }
  .page-intro { padding-top: 38px; }
  .workspace-welcome { gap: 18px; padding: 21px; }
  .landing-page .landing-hero { padding: 55px 19px 42px; }
  .landing-page .landing-hero__visual { min-height: 280px; }
  .landing-impact { padding: 52px 17px 42px; }
  .landing-impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .landing-impact__stat { min-height: 175px; padding: 17px; }
  .landing-impact__stat p { font-size: 13px; }
  .landing-platform-section { padding: 56px 17px; }
  .landing-platform-grid { grid-template-columns: 1fr; }
  .landing-platform-card { min-height: 0; }
}
@media (max-width: 420px) {
  .landing-impact__grid { grid-template-columns: 1fr; }
  .landing-impact__stat { min-height: 0; }
  .landing-impact__stat p { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}