/* TravDesk — page-specific styles (converted from travdesk.html <style>) */

/* Hero */
.dsmt-td-hero { background: var(--dsmt-dark); padding: 100px var(--dsmt-gutter) 80px; overflow: hidden; position: relative; }
.dsmt-td-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
}
.dsmt-td-hero-inner { max-width: var(--dsmt-max); margin: 0 auto; position: relative; z-index: 1; }
.dsmt-td-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(45,110,245,0.12); border: 1px solid rgba(45,110,245,0.25); border-radius: 100px; padding: 5px 14px 5px 8px; margin-bottom: 28px; }
.dsmt-td-badge-live { width: 7px; height: 7px; border-radius: 50%; background: var(--dsmt-green); box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.dsmt-td-badge-text { font-size: 0.75rem; font-weight: 600; color: rgba(45,110,245,0.9); letter-spacing: 0.05em; }
.dsmt-td-hero h1 { font-family: var(--dsmt-font-head); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; color: #fff; line-height: 1.05; letter-spacing: -0.04em; max-width: 16ch; margin-bottom: 20px; }
.dsmt-td-hero h1 span { color: var(--dsmt-blue); }
.dsmt-td-hero-sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,0.55); max-width: 60ch; line-height: 1.7; margin-bottom: 36px; }
.dsmt-td-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }
.dsmt-td-stats { display: flex; gap: 0; border-top: 1px solid var(--dsmt-dark-line); padding-top: 36px; flex-wrap: wrap; }
.dsmt-td-stat { padding: 0 36px 0 0; margin-right: 36px; border-right: 1px solid var(--dsmt-dark-line); }
.dsmt-td-stat:last-child { border-right: none; }
.dsmt-td-stat-num { font-family: var(--dsmt-font-head); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.dsmt-td-stat-num span { color: var(--dsmt-blue); }
.dsmt-td-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.35); font-weight: 500; letter-spacing: 0.06em; margin-top: 4px; text-transform: uppercase; }

/* What's New in V2 */
.dsmt-v2-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--dsmt-dark-line); border: 1px solid var(--dsmt-dark-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; margin-top: 48px; }
@media(max-width:820px){.dsmt-v2-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.dsmt-v2-grid{grid-template-columns:1fr;}}
.dsmt-v2-cell { padding: 30px 24px; background: var(--dsmt-dark-2); transition: background 0.15s; }
.dsmt-v2-cell:hover { background: #14142a; }
.dsmt-v2-label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dsmt-blue); margin-bottom: 10px; font-weight: 600; }
.dsmt-v2-title { font-family: var(--dsmt-font-head); font-size: 0.925rem; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.dsmt-v2-desc { font-size: 0.8rem; color: rgba(255,255,255,0.4); line-height: 1.6; }

/* Problems */
.dsmt-prob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
@media(max-width:900px){.dsmt-prob-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.dsmt-prob-grid{grid-template-columns:1fr;}}
.dsmt-prob-card { background: var(--dsmt-bg); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-lg); padding: 26px; transition: box-shadow 0.2s, transform 0.2s; }
.dsmt-prob-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.07); transform: translateY(-2px); }
.dsmt-prob-icon { width: 34px; height: 34px; border-radius: 9px; background: #FFF0F0; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.dsmt-prob-title { font-family: var(--dsmt-font-head); font-size: 0.925rem; font-weight: 700; color: var(--dsmt-ink); margin-bottom: 7px; line-height: 1.3; }
.dsmt-prob-desc { font-size: 0.825rem; color: var(--dsmt-ink-2); line-height: 1.65; }
.dsmt-solve-strip { margin-top: 44px; background: var(--dsmt-blue); border-radius: var(--dsmt-radius-xl); padding: 44px; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media(max-width:900px){.dsmt-solve-strip{grid-template-columns:1fr;padding:32px;}}
.dsmt-solve-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 7px; }
.dsmt-solve-title { font-family: var(--dsmt-font-head); font-size: 0.975rem; font-weight: 600; color: #fff; margin-bottom: 7px; line-height: 1.3; }
.dsmt-solve-desc { font-size: 0.825rem; color: rgba(255,255,255,0.68); line-height: 1.65; }

/* Features */
.dsmt-feat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px; }
.dsmt-feat-tab { padding: 7px 15px; border: 1px solid var(--dsmt-line); border-radius: 100px; font-size: 0.78rem; font-weight: 600; color: var(--dsmt-ink-2); background: var(--dsmt-bg); cursor: pointer; transition: all 0.15s; font-family: var(--dsmt-font-body); }
.dsmt-feat-tab:hover { border-color: var(--dsmt-blue); color: var(--dsmt-blue); }
.dsmt-feat-tab.dsmt-active { background: var(--dsmt-ink); color: #fff; border-color: var(--dsmt-ink); }
.dsmt-feat-panel { display: none; }
.dsmt-feat-panel.dsmt-active { display: block; }
.dsmt-feat-panel-hd { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-bottom: 24px; }
@media(max-width:600px){.dsmt-feat-panel-hd{grid-template-columns:1fr;}}
.dsmt-feat-panel-title { font-family: var(--dsmt-font-head); font-size: clamp(1.5rem,2.8vw,2.2rem); font-weight: 700; color: var(--dsmt-ink); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 7px; }
.dsmt-feat-panel-title span { color: var(--dsmt-blue); }
.dsmt-feat-panel-desc { font-size: 0.875rem; color: var(--dsmt-ink-2); line-height: 1.65; max-width: 58ch; }
.dsmt-feat-badge { font-family: var(--dsmt-font-head); font-size: 3rem; font-weight: 800; color: var(--dsmt-blue); opacity: 0.12; letter-spacing: -0.05em; line-height: 1; }
.dsmt-td-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; background: none; border: none; border-radius: 0; }
@media(max-width:900px){.dsmt-td-feat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.dsmt-td-feat-grid{grid-template-columns:1fr;}}
.dsmt-feat-card { background: var(--dsmt-bg); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-lg); padding: 18px; display: flex; gap: 11px; align-items: flex-start; transition: border-color 0.15s, box-shadow 0.15s; }
.dsmt-feat-card:hover { border-color: var(--dsmt-blue); box-shadow: 0 0 0 3px var(--dsmt-blue-dim); }
.dsmt-feat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dsmt-blue); flex-shrink: 0; margin-top: 6px; }
.dsmt-feat-name { font-size: 0.85rem; font-weight: 600; color: var(--dsmt-ink); margin-bottom: 4px; }
.dsmt-feat-card .dsmt-feat-desc { font-size: 0.78rem; color: var(--dsmt-ink-2); line-height: 1.55; }

/* Use Cases */
.dsmt-cases-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 44px; }
@media(max-width:960px){.dsmt-cases-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.dsmt-cases-grid{grid-template-columns:1fr;}}
.dsmt-case-card { background: var(--dsmt-dark-2); border: 1px solid var(--dsmt-dark-line); border-radius: var(--dsmt-radius-xl); padding: 26px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.2s; }
.dsmt-case-card:hover { border-color: rgba(45,110,245,0.4); }
.dsmt-case-num { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--dsmt-blue); text-transform: uppercase; }
.dsmt-case-scenario { font-family: var(--dsmt-font-head); font-size: 0.975rem; font-weight: 500; color: #fff; line-height: 1.4; font-style: italic; }
.dsmt-case-steps { display: grid; gap: 7px; }
.dsmt-case-step { display: flex; gap: 9px; align-items: flex-start; font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
.dsmt-case-step-n { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(45,110,245,0.35); font-size: 0.62rem; font-weight: 700; color: var(--dsmt-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.dsmt-case-result { background: rgba(45,110,245,0.1); border-left: 2px solid var(--dsmt-blue); padding: 9px 13px; font-size: 0.78rem; color: rgba(255,255,255,0.65); line-height: 1.5; border-radius: 0 6px 6px 0; }

/* How it works */
.dsmt-how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--dsmt-line); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; margin-top: 48px; }
@media(max-width:820px){.dsmt-how-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.dsmt-how-grid{grid-template-columns:1fr;}}
.dsmt-how-cell { padding: 34px 26px; background: var(--dsmt-bg); transition: background 0.15s; }
.dsmt-how-cell:hover { background: var(--dsmt-bg-2); }
.dsmt-how-num { font-family: var(--dsmt-font-head); font-size: 3.2rem; font-weight: 800; color: var(--dsmt-bg-3); line-height: 1; letter-spacing: -0.05em; margin-bottom: 18px; }
.dsmt-how-title { font-family: var(--dsmt-font-head); font-size: 0.925rem; font-weight: 700; color: var(--dsmt-ink); margin-bottom: 9px; }
.dsmt-how-desc { font-size: 0.825rem; color: var(--dsmt-ink-2); line-height: 1.65; }