/* Assist Infotech — shared stylesheet for the demo websites.
   Each demo sets its own theme tokens in a <style>:root{...}</style> block. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url("../fonts/dm-sans-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500 600;
  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --d-ink: #10241f; --d-bg: #f7faf9; --d-surface: #fff; --d-accent: #0e9f95; --d-accent2: #ffd84d;
  --d-line: #dde7e4; --d-text: #14241f; --d-muted: #61736e; --d-radius: 14px;
  --d-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --d-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --d-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --d-gutter: clamp(16px, 4vw, 40px);
  --d-bar: 52px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--d-bar) + 76px); }
body { margin: 0; background: var(--d-bg); color: var(--d-text); font-family: var(--d-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--d-display); font-weight: 800; line-height: 1.03; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--d-accent2); outline-offset: 2px; }

/* ---------- demo bar ---------- */
.demo-bar {
  position: sticky; top: 0; z-index: 90; min-height: var(--d-bar);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px clamp(12px, 3vw, 24px); background: #04201f; color: #e9f5f2;
  font-family: var(--d-body); font-size: .85rem;
}
.demo-bar__tag { font-family: var(--d-mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em; padding: 4px 8px; border-radius: 6px; background: #ffd84d; color: #04201f; }
.demo-bar__text { color: #9fbdb8; }
.demo-bar__text b { color: #fff; }
.demo-bar__price { font-weight: 800; color: #ffd84d; margin-left: auto; }
.demo-bar__btn { text-decoration: none; font-weight: 700; padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .28); white-space: nowrap; }
.demo-bar__btn:hover { background: rgba(255, 255, 255, .12); }
.demo-bar__btn--add { background: #ffd84d; color: #04201f; border-color: #ffd84d; }
.demo-bar__btn--wa { background: #25d366; color: #05301b; border-color: #25d366; }
@media (max-width: 720px) { .demo-bar__text { display: none; } .demo-bar__price { margin-left: 0; } }

/* ---------- shell ---------- */
.d-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--d-gutter); }
.d-sec { padding-block: clamp(48px, 7vw, 96px); }
.d-sec--alt { background: color-mix(in srgb, var(--d-ink) 5%, var(--d-bg)); }
.d-dark { background: var(--d-bg); color: var(--d-text); }
.d-h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); margin-bottom: 12px; }
.d-lead { color: var(--d-muted); font-size: 1.05rem; max-width: 60ch; }
.d-muted { color: var(--d-muted); }
.d-center { text-align: center; }
.d-eyebrow { display: inline-block; font-family: var(--d-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--d-accent); margin-bottom: 14px; }
.d-sec__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.d-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.d-row--center { justify-content: center; }
.d-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.d-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }

/* ---------- nav ---------- */
.d-nav { position: sticky; top: var(--d-bar); z-index: 80; background: color-mix(in srgb, var(--d-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--d-line); }
.d-nav__in { display: flex; align-items: center; gap: 18px; height: 72px; }
.d-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.d-brand__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--d-accent), var(--d-accent2)); flex: none; }
.d-brand b { display: block; font-family: var(--d-display); font-size: 1.1rem; letter-spacing: -.02em; }
.d-brand small { display: block; font-size: .72rem; color: var(--d-muted); }
.d-nav__links { margin-left: auto; display: flex; gap: 22px; font-weight: 600; font-size: .95rem; }
.d-nav__links a { text-decoration: none; }
.d-nav__links a:hover { color: var(--d-accent); }
.d-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--d-line); background: var(--d-surface); border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; }
.d-burger span { width: 18px; height: 2px; background: var(--d-text); border-radius: 2px; }
@media (max-width: 860px) {
  .d-nav__links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--d-surface); border-bottom: 1px solid var(--d-line); padding: 8px var(--d-gutter) 16px; display: none; }
  .d-nav.is-open .d-nav__links { display: flex; }
  .d-nav__links a { padding: 12px 0; border-bottom: 1px solid var(--d-line); }
  .d-burger { display: flex; margin-left: auto; order: 3; }
  .d-nav__in .d-btn { order: 2; }
}

/* ---------- buttons ---------- */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border: 0; border-radius: calc(var(--d-radius) * 2); background: var(--d-accent); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s, filter .2s; }
.d-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.d-btn--lg { min-height: 54px; padding: 15px 26px; font-size: 1.02rem; }
.d-btn--sm { min-height: 38px; padding: 8px 15px; font-size: .88rem; }
.d-btn--block { width: 100%; }
.d-btn--ghost { background: transparent; color: var(--d-text); border: 1.5px solid var(--d-line); }
.d-btn--ghost:hover { border-color: var(--d-accent); color: var(--d-accent); }

/* ---------- hero ---------- */
.d-hero { padding-block: clamp(44px, 6vw, 88px); }
.d-hero__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 4vw, 60px); align-items: center; }
.d-hero--center { text-align: center; }
.d-hero--center .d-lead { margin-inline: auto; }
.d-hero--wide h1 { max-width: 20ch; }
.d-hero .d-lead { margin-top: 18px; font-size: 1.12rem; }
.d-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: var(--d-muted); font-size: .95rem; }
.d-ticks li { display: flex; align-items: center; gap: 8px; }
.d-ticks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--d-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.d-hero__card { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: calc(var(--d-radius) * 1.4); padding: 24px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .45); }
.d-card--soft { background: color-mix(in srgb, var(--d-accent) 8%, var(--d-surface)); }
.d-hero__art { display: grid; gap: 10px; }
.d-art--rooms { grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, 150px); }
.d-art--rooms span { border-radius: var(--d-radius); background: linear-gradient(150deg, var(--d-accent), color-mix(in srgb, var(--d-accent) 40%, var(--d-ink))); }
.d-art--rooms span:nth-child(2) { background: linear-gradient(150deg, var(--d-accent2), color-mix(in srgb, var(--d-accent2) 40%, #fff)); }
.d-art--rooms span:nth-child(3) { background: color-mix(in srgb, var(--d-ink) 82%, #fff); }
.d-art--rooms span:nth-child(4) { grid-column: 1 / -1; height: 110px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--d-accent) 18%, #fff) 0 14px, color-mix(in srgb, var(--d-accent) 8%, #fff) 14px 28px); }
.d-art--swatch { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; }
.d-art--swatch span { border-radius: var(--d-radius); }
.d-art--swatch span:nth-child(1) { background: linear-gradient(140deg, #7b2ff7, #b06ab3); }
.d-art--swatch span:nth-child(2) { background: linear-gradient(140deg, #ff7ab6, #ffb88c); }
.d-art--swatch span:nth-child(3) { background: linear-gradient(140deg, #2f9f8f, #a8e6cf); }
.d-art--swatch span:nth-child(4) { background: linear-gradient(140deg, #f7b733, #fc4a1a); }
.d-art--swatch span:nth-child(5) { background: linear-gradient(140deg, #4b6cb7, #182848); }
.d-art--swatch span:nth-child(6) { background: linear-gradient(140deg, #c31432, #240b36); }
.d-hero--split { background: radial-gradient(70% 90% at 80% 0%, color-mix(in srgb, var(--d-accent) 30%, transparent), transparent 70%); }
.d-hero--shop { background: radial-gradient(60% 80% at 90% 10%, color-mix(in srgb, var(--d-accent) 16%, transparent), transparent 70%); }

/* ---------- strip ---------- */
.d-strip { background: var(--d-ink); color: #fff; }
.d-strip__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; padding-block: 26px; text-align: center; }
.d-strip b { display: block; font-family: var(--d-display); font-size: 1.7rem; letter-spacing: -.03em; }
.d-strip span { font-size: .84rem; opacity: .75; }

/* ---------- cards ---------- */
.d-card { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.d-card h3 { font-size: 1.22rem; }
.d-card p { color: var(--d-muted); font-size: .96rem; }
.d-num { font-family: var(--d-mono); font-size: .8rem; color: var(--d-accent); }
.d-from { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--d-accent); }
.d-doc { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.d-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--d-display); font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--d-accent), var(--d-ink)); margin-bottom: 6px; }
.d-price { margin: 18px 0; padding: 18px 20px; border-radius: var(--d-radius); background: var(--d-surface); border: 1px solid var(--d-line); }
.d-price span { color: var(--d-muted); font-size: .9rem; }
.d-price b { display: block; font-family: var(--d-display); font-size: 2.4rem; letter-spacing: -.04em; }
.d-price small { color: var(--d-muted); }

/* ---------- steps ---------- */
.d-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin-top: 26px; }
.d-steps li { counter-increment: s; display: flex; flex-direction: column; gap: 6px; padding-top: 44px; position: relative; color: var(--d-muted); }
.d-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--d-accent); color: #fff; font-family: var(--d-mono); font-size: .8rem; }
.d-steps b { color: var(--d-text); font-size: 1.05rem; }

/* ---------- gallery / shots ---------- */
.d-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.d-gal figure { margin: 0; border-radius: var(--d-radius); overflow: hidden; aspect-ratio: 4 / 3; position: relative; display: flex; align-items: flex-end; }
.d-gal figcaption { position: relative; width: 100%; padding: 10px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; font-size: .86rem; font-weight: 600; }
.d-shot--a { background: linear-gradient(140deg, var(--d-accent), var(--d-ink)); }
.d-shot--b { background: linear-gradient(140deg, var(--d-accent2), var(--d-accent)); }
.d-shot--c { background: linear-gradient(140deg, color-mix(in srgb, var(--d-ink) 70%, #fff), var(--d-accent)); }
.d-shot--d { background: linear-gradient(140deg, var(--d-ink), color-mix(in srgb, var(--d-accent2) 60%, var(--d-ink))); }
.d-gal--warm .d-shot--a { background: linear-gradient(140deg, #b7342a, #f0a04b); }
.d-gal--warm .d-shot--b { background: linear-gradient(140deg, #1f7a4d, #b7d3a8); }
.d-gal--warm .d-shot--c { background: linear-gradient(140deg, #6b2d1f, #c97b4a); }
.d-gal--warm .d-shot--d { background: linear-gradient(140deg, #3c2a1e, #a0693c); }

/* ---------- menu ---------- */
.d-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px; margin-top: 26px; }
.d-menu__block h3 { font-size: 1.15rem; padding-bottom: 10px; border-bottom: 2px solid var(--d-accent); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.d-menu ul { list-style: none; display: grid; gap: 14px; }
.d-menu li { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; }
.d-menu b { display: block; font-size: 1rem; }
.d-menu span { color: var(--d-muted); font-size: .88rem; }
.d-menu em { font-style: normal; font-weight: 700; color: var(--d-accent); white-space: nowrap; }
.d-orderlinks { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: .92rem; color: var(--d-muted); }
.d-orderlinks a { font-weight: 700; color: var(--d-accent); }

/* ---------- properties ---------- */
.d-search { margin-top: 28px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; align-items: end; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .5); }
.d-search label, .d-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--d-muted); }
.d-search select, .d-form input, .d-form select, .d-form textarea { font: inherit; font-weight: 400; color: var(--d-text); padding: 11px 12px; border: 1.5px solid var(--d-line); border-radius: calc(var(--d-radius) * .7); background: var(--d-surface); width: 100%; }
.d-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.d-prop { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-radius); overflow: hidden; display: flex; flex-direction: column; }
.d-prop__shot { aspect-ratio: 16 / 10; position: relative; }
.d-prop__tag { position: absolute; left: 12px; top: 12px; background: var(--d-surface); color: var(--d-text); font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
.d-prop__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.d-prop__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-prop__foot b { font-family: var(--d-display); font-size: 1.3rem; }

/* ---------- products ---------- */
.d-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.d-chips button { font: inherit; font-size: .88rem; font-weight: 600; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--d-line); background: var(--d-surface); cursor: pointer; }
.d-chips button.is-on { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
.d-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.d-prod { display: flex; flex-direction: column; gap: 6px; }
.d-prod__shot { aspect-ratio: 3 / 4; border-radius: var(--d-radius); position: relative; margin-bottom: 8px; }
.d-prod__tag { position: absolute; left: 10px; top: 10px; background: #fff; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 99px; }
.d-prod h3 { font-size: 1.02rem; }
.d-prod__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-prod__foot b { font-size: 1.08rem; }
.d-prod__foot s { color: var(--d-muted); font-size: .86rem; margin-left: 6px; }

/* ---------- forms, faq, contact ---------- */
.d-form { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: calc(var(--d-radius) * 1.2); padding: 24px; }
.d-form h3 { font-size: 1.3rem; }
.d-form .d-muted { margin: 6px 0 16px; font-size: .92rem; }
.d-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; margin-bottom: 16px; }
.d-form .d-col2 { grid-column: 1 / -1; }
.d-form__note { margin-top: 12px; font-size: .78rem; color: var(--d-muted); }
.d-faq details { border: 1px solid var(--d-line); border-radius: var(--d-radius); background: var(--d-surface); padding: 14px 18px; margin-bottom: 10px; }
.d-faq summary { cursor: pointer; font-weight: 700; }
.d-faq p { margin-top: 10px; color: var(--d-muted); }
.d-contact { list-style: none; display: grid; gap: 10px; margin-top: 20px; color: var(--d-muted); }
.d-contact b { display: block; color: var(--d-text); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.d-map { margin-top: 18px; height: 180px; border-radius: var(--d-radius); border: 1px dashed var(--d-line); display: grid; place-items: center; color: var(--d-muted); font-family: var(--d-mono); font-size: .8rem; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--d-ink) 4%, transparent) 0 12px, transparent 12px 24px); }
.d-hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 16px; font-size: .92rem; }
.d-hours dt { color: var(--d-muted); }
.d-hours dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- cta + footer ---------- */
.d-cta { background: var(--d-ink); color: #fff; padding-block: clamp(40px, 6vw, 72px); }
.d-cta__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.d-cta .d-lead { color: rgba(255, 255, 255, .72); }
.d-foot { background: var(--d-ink); color: rgba(255, 255, 255, .75); padding-block: 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.d-foot__in { display: grid; gap: 20px; }
.d-foot b { color: #fff; font-family: var(--d-display); font-size: 1.15rem; }
.d-foot p { font-size: .9rem; margin-top: 8px; }
.d-foot nav { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 600; }
.d-foot nav a { text-decoration: none; }
.d-foot__note { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; font-size: .82rem; }
.d-foot__note a { color: var(--d-accent2); }

/* dark demo (landing) tweaks */
.demo--landing { color-scheme: dark; }
.demo--landing .d-card, .demo--landing .d-form, .demo--landing .d-faq details, .demo--landing .d-price { background: var(--d-surface); border-color: var(--d-line); }
.demo--landing .d-form input, .demo--landing .d-form select, .demo--landing .d-form textarea { background: #14111f; border-color: var(--d-line); color: var(--d-text); }
.demo--landing .d-sec--alt { background: #110f1c; }
.demo--landing .d-btn--ghost { color: var(--d-text); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .d-btn:hover { transform: none; } }