/* ================================================================
   TypeDrama — Site / Landing CSS
   ================================================================ */

/* ---- Site body ---- */
.td-site-body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--td-bg);
	font-family: 'DM Sans', -apple-system, sans-serif;
}

/* ---- Header ---- */
.td-site-header {
	border-bottom: 1px solid var(--td-border);
	flex-shrink: 0;
	padding: 0 40px;
}
.td-site-header-inner {
	max-width: 1080px;
	margin: 0 auto;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.td-site-header-login {
	font-size: 13px;
	padding: 6px 16px;
}

/* ---- Main container ---- */
.td-site-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}
.td-site-main.td-landing-main {
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
}
.td-landing-wrap {
	width: 100%;
}

/* ---- Auth / inner pages (login, register) ---- */
.td-site-main .nk-block-head { width: 100%; max-width: 400px; margin-bottom: 20px; }
.td-site-main .nk-block-title { color: var(--td-text); font-size: 1.25rem; font-weight: 600; }
.td-site-main .nk-block-des p { color: var(--td-text-muted); font-size: 13px; margin: 4px 0 0; }
.td-site-main .form-group { margin-bottom: 14px; width: 100%; max-width: 400px; }
.td-site-main .form-group label { color: var(--td-text-muted); font-size: 12px; display: block; margin-bottom: 4px; }
.td-site-main .form-control {
	width: 100%;
	background: var(--td-input-bg);
	border: 1px solid var(--td-border);
	color: var(--td-text);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.15s;
}
.td-site-main .form-control:focus { border-color: var(--td-accent); }
.td-site-main .btn.btn-primary.w-100 {
	width: 100%;
	max-width: 400px;
	background: var(--td-accent);
	border: none;
	color: #fff;
	border-radius: 6px;
	padding: 10px;
	font-size: 14px;
	cursor: pointer;
	transition: opacity 0.15s;
}
.td-site-main .btn.btn-primary.w-100:hover { opacity: 0.9; }
.td-site-main .ajax-form-result { width: 100%; max-width: 400px; }
.td-site-main .col-md-6 { width: 100%; max-width: 400px; padding: 0; }
.td-site-main .mt-4 { margin-top: 20px; color: var(--td-text-muted); font-size: 12px; text-align: center; }
.td-site-main .mt-4 a { color: var(--td-text-muted); }
.td-site-main .oauth-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 400px;
	margin-top: 12px;
}
.td-site-main .oauth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 16px;
	border: 1px solid var(--td-border);
	border-radius: 6px;
	background: transparent;
	color: var(--td-text);
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s;
}
.td-site-main .oauth-btn:hover { border-color: var(--td-accent); }
.td-site-main .auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 400px;
	margin: 16px 0;
	color: var(--td-text-muted);
	font-size: 12px;
}
.td-site-main .auth-divider::before,
.td-site-main .auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--td-border);
}

/* ================================================================
   LANDING — shared
   ================================================================ */

.td-land-container { max-width: 1080px; margin: 0 auto; width: 100%; }
.td-land-section     { padding: 96px 40px; }
.td-land-section-alt { background: rgba(255,255,255,0.018); }

.td-land-h2 {
	font-family: 'Bricolage Grotesque', 'Syne', sans-serif;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 800;
	color: var(--td-text);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin-bottom: 16px;
}
.td-land-h2 em {
	font-style: normal;
	background: linear-gradient(135deg, #ff6b35 0%, #ff9f1c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.td-land-sub {
	font-size: 1.05rem;
	color: var(--td-text-muted);
	line-height: 1.65;
	max-width: 520px;
}

/* ================================================================
   HERO
   ================================================================ */

.td-hero {
	position: relative;
	padding: 80px 40px 72px;
	overflow: hidden;
}
.td-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 70% at 68% 50%, rgba(255,107,53,0.11) 0%, transparent 65%),
		radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,159,28,0.05) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.td-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.028;
	pointer-events: none;
	z-index: 0;
}

.td-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.td-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255,107,53,0.1);
	border: 1px solid rgba(255,107,53,0.22);
	color: #ff9f1c;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 5px 12px 5px 9px;
	border-radius: 100px;
	margin-bottom: 22px;
}
.td-hero-badge span {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #ff6b35;
	display: inline-block;
	animation: td-pulse 1.8s ease-in-out infinite;
}
@keyframes td-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,107,53,0.5); }
	50%       { opacity: 0.5; box-shadow: 0 0 0 4px rgba(255,107,53,0); }
}

.td-hero-title {
	font-family: 'Bricolage Grotesque', 'Syne', sans-serif;
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--td-text);
	margin-bottom: 20px;
}
.td-hero-title em {
	font-style: normal;
	background: linear-gradient(135deg, #ff6b35 0%, #ffb347 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.td-hero-desc {
	font-size: 1.05rem;
	color: var(--td-text-muted);
	line-height: 1.65;
	margin-bottom: 32px;
	max-width: 440px;
}
.td-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.td-hero-note    { margin-top: 14px; font-size: 12px; color: var(--td-text-muted); opacity: 0.5; }
.td-btn-lg       { padding: 11px 28px; font-size: 15px; }

/* ================================================================
   PHONE MOCK
   ================================================================ */

.td-phone-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.td-phone-wrap::before {
	content: '';
	position: absolute;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(255,107,53,0.18) 0%, transparent 65%);
	border-radius: 50%;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	animation: td-orb 4s ease-in-out infinite;
}
@keyframes td-orb {
	0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
	50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}
.td-phone {
	width: 256px;
	background: #1a1a22;
	border-radius: 38px;
	border: 1.5px solid rgba(255,255,255,0.07);
	box-shadow:
		0 0 0 1px rgba(255,107,53,0.08),
		0 48px 80px rgba(0,0,0,0.55),
		0 16px 32px rgba(0,0,0,0.35);
	overflow: hidden;
	position: relative;
	z-index: 1;
	animation: td-float 5s ease-in-out infinite;
}
@keyframes td-float {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-9px); }
}
.td-phone-bar {
	background: #25d366;
	padding: 10px 14px 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.td-phone-avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.td-phone-contact        { flex: 1; }
.td-phone-contact-name   { font-size: 13px; font-weight: 600; color: #fff; line-height: 1; }
.td-phone-contact-status { font-size: 10px; color: rgba(255,255,255,0.75); margin-top: 2px; }
.td-phone-body {
	background: #0b141a;
	padding: 12px 10px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.td-phone-msg {
	max-width: 76%;
	padding: 7px 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #e9edef;
}
.td-phone-msg.in  { background: #202c33; border-radius: 7px 7px 7px 2px; align-self: flex-start; }
.td-phone-msg.out { background: #005c4b; border-radius: 7px 7px 2px 7px; align-self: flex-end; }
.td-phone-msg-time {
	font-size: 9px;
	color: rgba(233,237,239,0.45);
	text-align: right;
	margin-top: 2px;
}
.td-phone-typing {
	align-self: flex-start;
	background: #202c33;
	padding: 9px 12px;
	border-radius: 7px 7px 7px 2px;
	display: flex; gap: 4px; align-items: center;
}
.td-phone-typing span {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	animation: td-typing 1.3s ease-in-out infinite;
}
.td-phone-typing span:nth-child(2) { animation-delay: 0.22s; }
.td-phone-typing span:nth-child(3) { animation-delay: 0.44s; }
@keyframes td-typing {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50%       { opacity: 1;   transform: translateY(-2px); }
}

/* ================================================================
   PLATFORMS
   ================================================================ */

.td-platforms {
	padding: 0 40px;
	border-top: 1px solid var(--td-border);
	border-bottom: 1px solid var(--td-border);
	background: rgba(255,255,255,0.015);
}
.td-platforms .td-land-container { padding: 36px 0; }
.td-platforms-label {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--td-text-muted);
	opacity: 0.4;
	margin-bottom: 24px;
}
.td-platforms-list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.td-platform-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 28px;
	border-radius: 16px;
	border: 1px solid var(--td-border);
	background: rgba(255,255,255,0.025);
	min-width: 110px;
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.td-platform-item:hover {
	border-color: rgba(255,107,53,0.3);
	background: rgba(255,107,53,0.04);
	transform: translateY(-2px);
}
.td-platform-icon  { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.td-platform-name  { font-size: 12px; font-weight: 600; color: var(--td-text-muted); white-space: nowrap; }
.td-platforms-note { text-align: center; font-size: 11.5px; color: var(--td-text-muted); opacity: 0.38; margin-top: 22px; }

/* ================================================================
   PROBLEM
   ================================================================ */

.td-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 48px;
	border: 1px solid var(--td-border);
	border-radius: 16px;
	overflow: hidden;
}
.td-problem-card {
	padding: 28px 24px;
	background: rgba(255,255,255,0.02);
	border-right: 1px solid var(--td-border);
	transition: background 0.2s;
}
.td-problem-card:last-child { border-right: none; }
.td-problem-card:hover      { background: rgba(255,255,255,0.04); }
.td-problem-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: rgba(255,107,53,0.08);
	border: 1px solid rgba(255,107,53,0.15);
	margin-bottom: 16px;
	color: #ff9f1c;
}
.td-problem-title { font-size: 14px; font-weight: 700; color: var(--td-text); margin-bottom: 8px; }
.td-problem-text  { font-size: 13px; color: var(--td-text-muted); line-height: 1.65; }
.td-problem-vs {
	margin-top: 32px;
	padding: 24px 28px;
	background: linear-gradient(135deg, rgba(255,107,53,0.07) 0%, rgba(255,159,28,0.04) 100%);
	border: 1px solid rgba(255,107,53,0.18);
	border-radius: 14px;
	font-size: 15px;
	color: var(--td-text);
	line-height: 1.65;
}
.td-problem-vs strong {
	display: block;
	margin-top: 12px;
	font-size: 16px;
	font-family: 'Bricolage Grotesque', 'Syne', sans-serif;
	background: linear-gradient(135deg, #ff6b35, #ff9f1c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ================================================================
   HOW IT WORKS
   ================================================================ */

.td-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 48px;
}
.td-step {
	padding-right: 28px;
	margin-right: 28px;
	border-right: 1px solid var(--td-border);
}
.td-step:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.td-step-num {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff6b35, #ff9f1c);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	font-family: 'Bricolage Grotesque', 'Syne', sans-serif;
	color: #fff;
	margin-bottom: 14px;
}
.td-step-title { font-size: 14px; font-weight: 700; color: var(--td-text); margin-bottom: 8px; }
.td-step-desc  { font-size: 13px; color: var(--td-text-muted); line-height: 1.65; }

/* ================================================================
   FEATURES
   ================================================================ */

.td-feat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 48px;
}
.td-feat-card {
	background: rgba(255,255,255,0.025);
	border: 1px solid var(--td-border);
	border-radius: 18px;
	padding: 30px;
	transition: border-color 0.25s, background 0.25s, transform 0.25s;
	position: relative;
	overflow: hidden;
}
.td-feat-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent);
	opacity: 0;
	transition: opacity 0.25s;
}
.td-feat-card:hover { border-color: rgba(255,107,53,0.25); background: rgba(255,107,53,0.03); transform: translateY(-2px); }
.td-feat-card:hover::before { opacity: 1; }
.td-feat-icon {
	width: 48px; height: 48px;
	border-radius: 13px;
	background: rgba(255,107,53,0.09);
	border: 1px solid rgba(255,107,53,0.16);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px;
}
.td-feat-title {
	font-size: 16px;
	font-weight: 700;
	font-family: 'Bricolage Grotesque', 'Syne', sans-serif;
	color: var(--td-text);
	margin-bottom: 8px;
}
.td-feat-desc  { font-size: 13px; color: var(--td-text-muted); line-height: 1.65; }
.td-feat-list  { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.td-feat-list li { font-size: 12.5px; color: var(--td-text-muted); display: flex; align-items: flex-start; gap: 7px; }
.td-feat-list li::before { content: '✓'; color: #ff9f1c; font-weight: 700; font-size: 11px; flex-shrink: 0; margin-top: 2px; }

/* ================================================================
   MESSENGER SUPPORT
   ================================================================ */

.td-messenger-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.td-messenger-card {
	flex: 1;
	min-width: 140px;
	background: rgba(255,255,255,0.025);
	border: 1px solid var(--td-border);
	border-radius: 16px;
	padding: 22px 16px;
	text-align: center;
	transition: border-color 0.2s, transform 0.2s;
}
.td-messenger-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); }
.td-messenger-card-icon  { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.td-messenger-card-name  { font-size: 12.5px; font-weight: 700; color: var(--td-text); }
.td-messenger-card-note  { font-size: 11px; color: var(--td-text-muted); margin-top: 4px; opacity: 0.6; }

/* ================================================================
   COMPARISON TABLE
   ================================================================ */

.td-compare-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 40px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--td-border);
}
.td-compare-table thead tr { background: rgba(255,255,255,0.04); }
.td-compare-table th,
.td-compare-table td        { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--td-border); font-size: 13px; }
.td-compare-table th        { font-size: 11px; font-weight: 700; color: var(--td-text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.td-compare-table td:first-child,
.td-compare-table th:first-child { text-align: left; color: var(--td-text); font-weight: 500; }
.td-compare-table tbody tr:last-child td  { border-bottom: none; }
.td-compare-table tbody tr:nth-child(even){ background: rgba(255,255,255,0.015); }
.td-compare-col-us              { background: rgba(255,107,53,0.05); }
.td-compare-table th.td-compare-col-us { color: #ff9f1c; }
.td-compare-yes { color: #4ade80; font-weight: 600; }
.td-compare-no  { color: rgba(255,255,255,0.2); }
.td-compare-mid { color: var(--td-text-muted); }

/* ================================================================
   PRICING
   ================================================================ */

.td-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; max-width: 640px; }
.td-pricing-card {
	background: rgba(255,255,255,0.025);
	border: 1px solid var(--td-border);
	border-radius: 18px;
	padding: 30px;
}
.td-pricing-card.td-pricing-pro {
	background: rgba(255,107,53,0.04);
	border-color: rgba(255,107,53,0.28);
	position: relative;
	overflow: hidden;
}
.td-pricing-card.td-pricing-pro::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, #ff6b35, #ff9f1c);
}
.td-pricing-plan  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--td-text-muted); margin-bottom: 10px; }
.td-pricing-card.td-pricing-pro .td-pricing-plan { color: #ff9f1c; }
.td-pricing-price { font-family: 'Bricolage Grotesque', 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: var(--td-text); margin-bottom: 4px; }
.td-pricing-note  { font-size: 12px; color: var(--td-text-muted); margin-bottom: 22px; }
.td-pricing-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.td-pricing-features li { font-size: 13px; color: var(--td-text-muted); display: flex; align-items: flex-start; gap: 8px; }
.td-pricing-features li::before { content: '✓'; color: #ff9f1c; font-weight: 700; font-size: 11px; flex-shrink: 0; margin-top: 2px; }
.td-pricing-bonus { font-size: 12px; color: var(--td-text-muted); text-align: center; margin-top: 10px; }

/* ================================================================
   FAQ
   ================================================================ */

.td-faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 6px; max-width: 740px; }
.td-faq-item { border: 1px solid var(--td-border); border-radius: 12px; overflow: hidden; list-style: none; }
.td-faq-item summary { list-style: none; }
.td-faq-item summary::-webkit-details-marker { display: none; }
.td-faq-item[open] { border-color: rgba(255,107,53,0.2); }
.td-faq-q {
	width: 100%;
	background: rgba(255,255,255,0.02);
	border: none;
	color: var(--td-text);
	font-size: 14px;
	font-weight: 600;
	padding: 18px 22px;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	transition: background 0.15s;
}
.td-faq-q:hover { background: rgba(255,255,255,0.04); }
.td-faq-q-arrow { font-size: 20px; color: var(--td-accent); transition: transform 0.2s; flex-shrink: 0; font-weight: 300; line-height: 1; }
.td-faq-item[open] .td-faq-q-arrow { transform: rotate(45deg); }
.td-faq-a { padding: 0 22px 18px; font-size: 13.5px; color: var(--td-text-muted); line-height: 1.7; }

/* ================================================================
   CTA BANNER
   ================================================================ */

.td-cta-banner {
	position: relative;
	padding: 100px 40px;
	text-align: center;
	overflow: hidden;
}
.td-cta-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255,107,53,0.1) 0%, transparent 65%);
	pointer-events: none;
}
.td-cta-banner::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,107,53,0.35), transparent);
}
.td-cta-banner .td-land-container { position: relative; z-index: 1; }
.td-cta-banner .td-land-h2        { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 14px; }
.td-cta-banner .td-land-sub       { margin: 0 auto 36px; }
.td-cta-actions { justify-content: center; }

/* ================================================================
   FOOTER
   ================================================================ */

.td-site-footer {
	padding: 24px 40px;
	border-top: 1px solid var(--td-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.td-site-footer-left      { display: flex; flex-direction: column; gap: 5px; }
.td-site-footer-copy      { font-size: 12px; color: var(--td-text-muted); opacity: 0.45; }
.td-site-footer-trademark { font-size: 11px; color: var(--td-text-muted); opacity: 0.28; max-width: 560px; line-height: 1.5; }
.td-site-footer-links     { display: flex; gap: 20px; flex-shrink: 0; }
.td-site-footer-links a   { font-size: 12px; color: var(--td-text-muted); text-decoration: none; opacity: 0.4; transition: opacity 0.15s; }
.td-site-footer-links a:hover { opacity: 0.8; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 860px) {
	.td-site-header { padding: 0 24px; }
	.td-hero { padding: 56px 24px 48px; }
	.td-hero-grid { grid-template-columns: 1fr; gap: 48px; }
	.td-phone-wrap { order: -1; }
	.td-land-section { padding: 64px 24px; }
	.td-platforms { padding: 0 24px; }
	.td-problem-grid { grid-template-columns: 1fr; }
	.td-problem-card { border-right: none; border-bottom: 1px solid var(--td-border); }
	.td-problem-card:last-child { border-bottom: none; }
	.td-steps { grid-template-columns: 1fr 1fr; }
	.td-step { padding-right: 20px; margin-right: 20px; }
	.td-feat-grid { grid-template-columns: 1fr; }
	.td-pricing-grid { grid-template-columns: 1fr; max-width: 100%; }
	.td-messenger-card { min-width: 120px; }
	.td-site-footer { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
	.td-site-footer-links { align-self: flex-start; }
	.td-cta-banner { padding: 72px 24px; }
}
@media (max-width: 520px) {
	.td-steps { grid-template-columns: 1fr; }
	.td-step { border-right: none; padding-right: 0; margin-right: 0; border-bottom: 1px solid var(--td-border); padding-bottom: 24px; margin-bottom: 24px; }
	.td-step:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
	.td-compare-table th, .td-compare-table td { padding: 10px 8px; font-size: 11px; }
}