/* Anycase 365 website. Implements the Claude Design handoff
   ("Anycase 365 Website.dc.html") as static CSS. Tokens are the subset of the
   Exco Partners design system the page uses, with the Anycase blue accent. */

:root {
  --acc: #0F6CBD;
  --acc-deep: #0B5598;
  --amber: #E8A33D;

  --ink-900: #19120D;
  --ink-800: #1B1A18;
  --ink-600: #3A362F;
  --warm-600: #5E5A53;
  --warm-450: #7A7468;
  --warm-400: #8A857B;
  --warm-300: #C3BEB4;
  --warm-200: #DED9CF;
  --warm-150: #F1EFEA;
  --warm-100: #F6F3ED;
  --warm-50: #FAF8F4;
  --warm-25: #FBF8F2;

  --font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: Consolas, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --gutter: 40px;
  --section-pad: 112px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--warm-50); color: var(--warm-600); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
h1, h2, h3, h4, p { margin: 0; }
img { display: block; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-deep); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: var(--section-pad) var(--gutter); display: flex; flex-direction: column; gap: 56px; }
.wrap--tight { gap: 48px; }
.grid { display: grid; }
.anchor { scroll-margin-top: 70px; }

.s-paper { background: var(--warm-50); }
.s-white { background: #fff; border-top: 1px solid var(--warm-200); }
.s-white--boxed { border-bottom: 1px solid var(--warm-200); }
.s-sand { background: var(--warm-100); border-top: 1px solid var(--warm-200); }
.s-dark { background: var(--ink-800); color: var(--warm-300); }

.intro { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.intro--wide { max-width: 860px; }
.intro--wider { max-width: 880px; }

/* ---------- Type ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; font: 400 12px var(--font-mono); letter-spacing: .38em; text-transform: uppercase; color: var(--warm-400); }
.eyebrow::before { content: ""; width: 25px; height: 1.5px; background: var(--amber); flex: none; }

.h1 { font: 800 clamp(46px, 6vw, 88px)/1.02 var(--font-display); letter-spacing: -0.011em; color: var(--ink-800); text-wrap: balance; }
.h2 { font: 800 clamp(34px, 3.6vw, 54px)/1.08 var(--font-display); letter-spacing: -0.011em; color: var(--ink-800); text-wrap: balance; }
.s-dark .h2 { color: #fff; }
.h1 em, .h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--acc); }
.s-dark .h2 em { color: var(--amber); }
.lead { font: 400 19px/1.5 var(--font-sans); text-wrap: pretty; }
.label { font: 400 11px var(--font-mono); letter-spacing: .235em; text-transform: uppercase; color: var(--warm-400); }
.num { font: 500 13px var(--font-mono); color: var(--acc); }
.s-dark .num { color: var(--amber); }
.pretty { text-wrap: pretty; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font: 600 16px var(--font-sans); transition: background 220ms var(--ease); cursor: pointer; }
.btn--primary { padding: 15px 26px; background: var(--acc); color: #fff; border: 0; }
.btn--primary:hover { background: var(--acc-deep); color: #fff; }
.btn--small { gap: 8px; padding: 11px 20px; font-size: 14px; }
.btn--ghost { padding: 14px 24px; border: 1.5px solid var(--ink-800); color: var(--ink-800); }
.btn--ghost:hover { color: var(--ink-800); background: var(--warm-150); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(250, 248, 244, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, .07); }
.site-header__inner { max-width: 1320px; margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.site-header__logo img { height: 34px; width: auto; }
.site-nav { display: flex; gap: 28px; flex: 1; white-space: nowrap; font: 500 14px var(--font-sans); }
.site-nav a { color: var(--ink-800); }
.site-nav a:hover { color: var(--acc); }
.site-header__end { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nec-badge { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nec-badge span { font: 400 10px var(--font-mono); letter-spacing: .235em; color: var(--warm-400); text-transform: uppercase; }
.nec-badge img { height: 16px; width: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(105deg, var(--warm-25) 0%, var(--warm-50) 50%, var(--warm-100) 100%); border-bottom: 1px solid var(--warm-200); }
.hero__watermark { position: absolute; right: -200px; top: -60px; width: 640px; height: 640px; opacity: .05; pointer-events: none; }
.hero__inner { position: relative; max-width: 1320px; margin: 0 auto; padding: 96px var(--gutter) 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 64px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.hero__lead { font: 400 20px/1.5 var(--font-sans); color: var(--warm-600); max-width: 540px; text-wrap: pretty; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__proof { display: flex; gap: 10px; flex-wrap: wrap; font: 400 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--warm-450); }

.matter { width: 100%; max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid rgba(0, 0, 0, .09); border-radius: 10px; box-shadow: 0 24px 60px rgba(27, 26, 24, .10), 0 2px 6px rgba(0, 0, 0, .04); overflow: hidden; }
.matter__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--warm-200); background: var(--warm-100); }
.matter__id { display: flex; flex-direction: column; gap: 4px; }
.matter__id .label { font-size: 10px; }
.matter__title { font: 700 17px var(--font-sans); color: var(--ink-800); }
.matter__chip { font: 500 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--warm-200); color: var(--warm-600); }
.matter__clock { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--warm-200); }
.matter__clock-row { display: flex; justify-content: space-between; font: 400 10px var(--font-mono); letter-spacing: .235em; text-transform: uppercase; color: var(--warm-400); }
.matter__clock-row span:last-child { color: var(--ink-800); }
.matter__bar { height: 6px; border-radius: 3px; background: var(--warm-150); overflow: hidden; }
.matter__bar div { width: 38%; height: 100%; background: var(--acc); border-radius: 3px; }
.matter__stages { padding: 6px 22px 4px; }
.stage { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--warm-150); }
.stage:last-child { border-bottom: 0; }
.stage__n { font: 500 12px var(--font-mono); color: var(--acc); }
.stage__text { display: flex; flex-direction: column; gap: 2px; }
.stage__name { font: 600 15px var(--font-sans); color: var(--ink-800); }
.stage__note { font: 400 13px var(--font-sans); color: var(--warm-450); }
.stage__state { font: 500 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.stage--pending .stage__n { color: var(--warm-300); }
.stage--pending .stage__name, .stage--pending .stage__note, .stage--pending .stage__state { color: var(--warm-400); }
.matter__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px; background: var(--ink-800); font: 400 10px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--warm-300); }
.matter__foot span:last-child { color: var(--amber); }

/* ---------- The trap ---------- */
.trap__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 64px; align-items: start; }
.trap__body { display: flex; flex-direction: column; gap: 20px; font: 400 18px/1.55 var(--font-sans); max-width: 560px; }
.trap__list { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin: 0; list-style: none; padding-left: 0; }
.trap__list li { display: flex; flex-direction: column; gap: 8px; }
.trap__list .num { font-size: 12px; }
.trap__list strong { font: 700 17px var(--font-sans); color: #fff; }
.pullquote { margin: 0; padding-left: 22px; border-left: 1.5px solid var(--amber); font: 500 italic 24px/1.4 var(--font-serif); color: #fff; max-width: 820px; text-wrap: pretty; }

/* ---------- Cards ---------- */
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 26px; }
.card { background: var(--warm-100); border: 1px solid rgba(0, 0, 0, .09); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.card--raised { box-shadow: 0 10px 34px rgba(0, 0, 0, .06); }
.card--lift { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.card--lift:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0, 0, 0, .09); }
.card h3 { font: 700 21px/1.24 var(--font-sans); color: var(--ink-800); }
.card p { font: 400 16px/1.5 var(--font-sans); text-wrap: pretty; }
.card--dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.card--dark h3 { color: #fff; }

.compare { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; padding-top: 36px; border-top: 1px solid var(--warm-200); }
.compare > div { display: flex; flex-direction: column; gap: 10px; }
.compare p { font: 400 17px/1.5 var(--font-sans); text-wrap: pretty; }
.compare__ours .label { color: var(--acc); }
.compare__ours p { font-weight: 500; color: var(--ink-800); }

/* ---------- Product tabs ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--warm-200); padding-bottom: 16px; }
.tab { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--warm-200); background: #fff; color: var(--ink-800); font: 600 14px var(--font-sans); cursor: pointer; transition: background 220ms var(--ease); }
.tab span { font: 500 11px var(--font-mono); opacity: .75; }
.tab[aria-selected="true"] { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
.panel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: start; }
.panel[hidden] { display: none; }
.panel__main { display: flex; flex-direction: column; gap: 20px; }
.panel__eyebrow { font: 400 11px var(--font-mono); letter-spacing: .38em; text-transform: uppercase; color: var(--acc); }
.panel__title { font: 800 clamp(28px, 2.6vw, 38px)/1.1 var(--font-display); letter-spacing: -0.011em; color: var(--ink-800); text-wrap: balance; }
.panel__lead { font: 400 18px/1.55 var(--font-sans); text-wrap: pretty; }
.example { margin-top: 12px; background: var(--warm-100); border: 1px solid rgba(0, 0, 0, .09); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.example .label { letter-spacing: .38em; }
.example p { font: 400 16px/1.55 var(--font-sans); color: var(--ink-600); text-wrap: pretty; }
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--warm-200); }
.points .num { font-size: 14px; }
.points li > div { display: flex; flex-direction: column; gap: 8px; }
.points h4 { font: 700 19px/1.3 var(--font-sans); color: var(--ink-800); }
.points p { font: 400 16px/1.5 var(--font-sans); text-wrap: pretty; }

/* ---------- Lineage ---------- */
.lineage { display: flex; flex-direction: column; gap: 16px; padding: 30px; border: 1px solid rgba(0, 0, 0, .09); border-radius: 10px; background: var(--warm-100); }
.lineage h3 { font: 800 26px/1.1 var(--font-display); color: var(--ink-800); }
.lineage p { font: 400 16px/1.5 var(--font-sans); flex: 1; text-wrap: pretty; }
.lineage__foot { font: 500 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--warm-600); padding-top: 14px; border-top: 1px solid var(--warm-200); }
.lineage--accent { background: var(--acc); border-color: transparent; color: #fff; box-shadow: 0 10px 34px rgba(0, 0, 0, .08); }
.lineage--accent .label { color: rgba(255, 255, 255, .8); }
.lineage--accent h3, .lineage--accent p, .lineage--accent .lineage__foot { color: #fff; }
.lineage--accent .lineage__foot { border-top-color: rgba(255, 255, 255, .3); }

/* ---------- Platform ---------- */
.contest { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.contest > div { display: flex; flex-direction: column; gap: 10px; }
.contest .eyebrow-plain { font: 400 12px var(--font-mono); letter-spacing: .38em; text-transform: uppercase; color: var(--amber); }
.contest h3 { font: 800 28px/1.15 var(--font-display); color: #fff; }
.contest p { font: 400 17px/1.55 var(--font-sans); text-wrap: pretty; }

/* ---------- Architecture ---------- */
.arch { border: 1.5px dashed var(--warm-300); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; background: #fff; }
.arch__label { font: 400 11px var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--warm-450); }
.arch__portal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border: 1px solid var(--warm-200); border-radius: 10px; background: var(--warm-100); }
.arch__portal > div { display: flex; flex-direction: column; gap: 4px; }
.arch__portal strong { font: 700 16px var(--font-sans); color: var(--ink-800); }
.arch__portal span { font: 400 14px var(--font-sans); }
.chip { font: 500 10px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--warm-450); border: 1px solid var(--warm-200); border-radius: 999px; padding: 5px 10px; background: #fff; }
.arch__flow { text-align: center; font: 400 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--warm-400); }
.arch__d365 { border: 1px solid var(--ink-800); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 16px; background: var(--warm-50); }
.arch__d365 > .arch__label { color: var(--ink-800); }
.arch__tiers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.tier { padding: 20px; border-radius: 10px; border: 1px solid var(--warm-200); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.tier__kind { font: 500 10px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--warm-450); }
.tier strong { font: 700 17px var(--font-sans); color: var(--ink-800); }
.tier p { font: 400 14px/1.45 var(--font-sans); }
.tier--accent { background: var(--acc); border-color: transparent; color: #fff; box-shadow: 0 10px 34px rgba(0, 0, 0, .10); }
.tier--accent .tier__kind { color: rgba(255, 255, 255, .85); }
.tier--accent strong, .tier--accent p { color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pills li { font: 500 12px var(--font-sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--warm-200); background: #fff; color: var(--ink-600); }
.arch__edge { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.edge { padding: 18px; border: 1px solid var(--warm-200); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.edge strong { font: 700 15px var(--font-sans); color: var(--ink-800); }
.edge span { font: 400 14px/1.45 var(--font-sans); }
.arch__note { font: 500 italic 22px/1.4 var(--font-serif); color: var(--ink-800); }

/* ---------- Track record ---------- */
.records { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 26px; }
.records .card { padding: 28px; }
.records .card h3 { font-size: 20px; }
.records .card p { font-size: 15px; flex: 1; }
.records__foot { font: 500 10px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-800); padding-top: 14px; border-top: 1px solid var(--warm-200); }

/* ---------- NEC ---------- */
.nec__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: end; }
.nec__grid > div { display: flex; flex-direction: column; gap: 22px; }
.nec__logo { height: 36px; width: auto; align-self: flex-start; }
.nec__body { font: 400 18px/1.55 var(--font-sans); text-wrap: pretty; }
.nec__sectors { color: var(--warm-450); }

/* ---------- Demo ---------- */
.demo { position: relative; overflow: hidden; }
.demo__watermark { position: absolute; right: -180px; bottom: -180px; width: 560px; height: 560px; opacity: .06; filter: invert(1); pointer-events: none; }
.demo .wrap { position: relative; }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 26px; list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); }
.steps li:first-child { border-top: 1.5px solid var(--amber); }
.steps .label { color: var(--warm-400); }
.steps li:first-child .label { color: var(--amber); }
.steps h3 { font: 700 20px/1.24 var(--font-sans); color: #fff; }
.steps p { font: 400 15px/1.5 var(--font-sans); text-wrap: pretty; }

.booking { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 40px; }
.booking__copy { display: flex; flex-direction: column; gap: 14px; }
.booking__copy h3 { font: 800 32px/1.1 var(--font-display); color: #fff; letter-spacing: -0.011em; }
.booking__copy p { font: 400 17px/1.5 var(--font-sans); text-wrap: pretty; }
.booking__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.booking__form input { width: 100%; padding: 14px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: 400 15px var(--font-sans); }
.booking__form input::placeholder { color: var(--warm-400); }
.booking__form input[aria-invalid="true"] { border-color: #F2A08A; }
.booking__form .btn--primary { justify-content: center; padding: 14px 22px; font-size: 15px; }
.booking__form .btn--primary:active { transform: scale(.985); }
.booking__form .btn--primary[disabled] { opacity: .7; cursor: progress; }
.booking__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking__error { grid-column: 1 / -1; font: 500 14px/1.45 var(--font-sans); color: #F2A08A; }
.booking__error:empty { display: none; }
.booking__done { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 1.5px solid var(--amber); }
.booking__done strong { font: 700 20px var(--font-sans); color: #fff; }
.booking__done span { font: 400 15px var(--font-sans); }
.booking__done[hidden], .booking__form[hidden] { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: var(--warm-400); border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer__inner { max-width: 1320px; margin: 0 auto; padding: 48px var(--gutter); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.site-footer__brands { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-footer__brands .rule { width: 1px; height: 28px; background: rgba(255, 255, 255, .18); }
.site-footer__meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font: 400 11px var(--font-mono); letter-spacing: .235em; text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1140px) { .site-nav { display: none; } }
@media (max-width: 640px) {
  :root { --gutter: 16px; --section-pad: 80px; }
  .nec-badge { display: none; }
  .hero__inner { padding-top: 64px; padding-bottom: 72px; }
  .arch, .booking { padding: 22px; }
  .site-footer__meta { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .tab, .card--lift { transition: none; }
}