/* =========================================================================
   TITARA DIGITAL — Main stylesheet
   Premium dark SaaS aesthetic · mobile-first · accessible
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
	--bg:            #0B0D0D;
	--bg-2:          #111514;
	--card:          #151A19;
	--dark:          #0E1110;
	--gold:          #D9A441;
	--gold-hi:       #F5C766;
	--gold-lt:       #FFE3A0;
	--white:         #F7F7F5;
	--text-2:        #B8BBB8;
	--muted:         #858A87;
	--border:        rgba(255,255,255,0.10);
	--border-gold:   rgba(217,164,65,0.35);
	--emerald:       #22B879;

	--ink:           #14201C;          /* dark text on light sections */
	--light:         #F4F5F1;          /* light section background */
	--light-2:       #FBFBF9;

	--grad-hero:  linear-gradient(135deg, #0A0C0C 0%, #171713 55%, #211A0F 100%);
	--grad-gold:  linear-gradient(135deg, #F8D27A 0%, #D9A441 50%, #A97520 100%);
	--grad-gold-btn: linear-gradient(135deg, #F5C766, #D9A441);

	--shadow-sm: 0 4px 14px rgba(0,0,0,.25);
	--shadow-md: 0 18px 40px rgba(0,0,0,.35);
	--shadow-lg: 0 40px 80px rgba(0,0,0,.5);
	--shadow-gold: 0 12px 40px rgba(217,164,65,.28);

	--radius:   18px;
	--radius-sm: 10px;
	--container: 1320px;
	--gutter: 20px;

	--ease: cubic-bezier(.22,.61,.36,1);
	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--white);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.titara-icon { flex: none; }

.titara-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--gold); color: #111; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700;
}
.titara-skip-link:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--gold-hi);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Layout ---------- */
.titara-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.titara-section { padding: clamp(64px, 8vw, 120px) 0; position: relative; }
.titara-section--dark  { background: var(--bg); color: var(--white); }
.titara-section--light { background: var(--light); color: var(--ink); }

.titara-section__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.titara-section__title { font-size: clamp(28px, 4vw, 44px); }
.titara-section__title--dark { color: var(--ink); }
.titara-section__lead { margin-top: 18px; color: var(--text-2); font-size: clamp(15px,1.6vw,18px); }
.titara-section--light .titara-section__lead { color: #55605a; }

.titara-text-gold {
	background: var(--grad-gold);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--gold);
}

.titara-eyebrow {
	display: inline-block;
	font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold);
}
.titara-eyebrow--center { display: block; text-align: center; margin-bottom: 14px; }
.titara-eyebrow--dark { color: var(--gold); }

/* ---------- Buttons ---------- */
.titara-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 22px; border-radius: var(--radius-sm);
	font-weight: 700; font-size: 15px; line-height: 1;
	border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease), background .25s var(--ease);
	min-height: 46px; white-space: nowrap;
}
.titara-btn .titara-icon { transition: transform .25s var(--ease); }
.titara-btn:hover .titara-icon { transform: translateX(3px); }

.titara-btn--gold { background: var(--grad-gold-btn); color: #14110A; box-shadow: var(--shadow-gold); }
.titara-btn--gold:hover { filter: brightness(1.06); transform: translateY(-2px); }

.titara-btn--ghost { background: rgba(255,255,255,.02); color: var(--white); border-color: var(--border-gold); }
.titara-btn--ghost:hover { background: rgba(217,164,65,.10); transform: translateY(-2px); }
.titara-section--light .titara-btn--ghost { color: var(--ink); border-color: rgba(20,32,28,.2); }

.titara-btn--lg { padding: 16px 28px; font-size: 16px; min-height: 54px; }
.titara-btn--sm { padding: 10px 16px; font-size: 13px; min-height: 40px; }
.titara-btn--block { display: flex; width: 100%; }

.titara-btn__play {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-gold); color: var(--gold-hi);
}

/* =========================================================================
   HEADER
   ========================================================================= */
.titara-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
	border-bottom: 1px solid transparent;
}
.titara-header.is-scrolled {
	background: rgba(11,13,13,.82);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--border);
	box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.titara-header__inner {
	display: flex; align-items: center; gap: 24px;
	height: 76px;
}
.titara-header__brand { display: flex; align-items: center; }
.titara-header__brand img,
.titara-header .custom-logo { height: 40px; width: auto; }
.titara-header__brand .custom-logo-link { display: flex; }

.titara-nav { margin-left: auto; }
.titara-nav__list { display: flex; align-items: center; gap: 6px; }
.titara-nav__list a {
	display: inline-block; padding: 8px 14px; border-radius: 8px;
	font-size: 14.5px; font-weight: 600; color: var(--text-2);
	transition: color .2s var(--ease), background .2s var(--ease);
}
.titara-nav__list a:hover,
.titara-nav__list .current-menu-item > a { color: var(--white); background: rgba(255,255,255,.05); }

.titara-header__cta { margin-left: 8px; }

.titara-burger {
	display: none; background: transparent; border: 1px solid var(--border);
	color: var(--white); width: 46px; height: 46px; border-radius: 10px; align-items: center; justify-content: center;
}

/* Mobile menu */
.titara-mobile-menu {
	position: fixed; inset: 0; z-index: 200; background: rgba(8,10,10,.98);
	backdrop-filter: blur(8px); padding: 20px 0; overflow-y: auto;
	opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.titara-mobile-menu[hidden] { display: none; }
.titara-mobile-menu.is-open { opacity: 1; transform: none; }
.titara-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.titara-mobile-menu__title { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-size: 13px; }
.titara-mobile-menu__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.titara-mobile-menu__list a {
	display: block; padding: 16px 4px; font-size: 20px; font-weight: 700;
	border-bottom: 1px solid var(--border);
}

/* =========================================================================
   HERO
   ========================================================================= */
.titara-hero {
	position: relative; overflow: hidden;
	background: var(--grad-hero);
	padding-top: 128px; padding-bottom: 80px;
}
.titara-hero__glow {
	position: absolute; top: -20%; right: -10%; width: 720px; height: 720px;
	background: radial-gradient(circle, rgba(217,164,65,.20) 0%, rgba(217,164,65,0) 65%);
	pointer-events: none;
}
.titara-hero__inner {
	display: grid; grid-template-columns: 1.02fr 1.1fr; gap: 48px; align-items: center;
	min-height: 620px;
}
.titara-hero__title { font-size: clamp(40px, 5.6vw, 74px); line-height: 1.02; margin: 18px 0 22px; }
.titara-hero__lead { color: var(--text-2); font-size: clamp(15px,1.5vw,18px); max-width: 560px; }

.titara-hero__features { display: flex; flex-wrap: wrap; gap: 26px 34px; margin: 30px 0 34px; }
.titara-hero__features li { display: flex; gap: 12px; align-items: center; }
.titara-hero__feature-icon {
	display: inline-flex; width: 42px; height: 42px; border-radius: 11px; align-items: center; justify-content: center;
	color: var(--gold-hi); background: rgba(217,164,65,.1); border: 1px solid var(--border-gold);
}
.titara-hero__features strong { display: block; font-size: 15px; }
.titara-hero__features em { font-style: normal; font-size: 13px; color: var(--muted); }

.titara-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero visual */
.titara-hero__visual { position: relative; }

.titara-badge-circle {
	position: absolute; top: -26px; right: 6px; z-index: 6;
	width: 108px; height: 108px; border-radius: 50%;
	background: var(--grad-gold); color: #211703;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; line-height: 1.7;
	box-shadow: var(--shadow-gold); transform: rotate(-8deg);
}

.titara-annotation {
	position: absolute; top: -34px; left: -6px; z-index: 6; max-width: 190px;
	font-family: "Segoe Script", "Brush Script MT", cursive; color: var(--gold-lt);
	font-size: 15px; line-height: 1.3; transform: rotate(-4deg);
}
.titara-annotation svg { color: var(--gold); margin-top: 4px; }

.titara-hero__chip {
	position: absolute; bottom: 18px; right: -8px; z-index: 7;
	background: #14110c; color: var(--gold-lt); border: 1px solid var(--border-gold);
	padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; line-height: 1.35;
	box-shadow: var(--shadow-md);
}

/* ---------- Laptop + phone mockup ---------- */
.titara-mock { position: relative; padding: 30px 0 40px; }

.titara-mock__laptop { position: relative; z-index: 2; }
.titara-mock__screen {
	border-radius: 14px 14px 0 0; overflow: hidden;
	border: 2px solid #23282a; border-bottom: none;
	background: #0c1211; box-shadow: var(--shadow-lg);
	aspect-ratio: 16 / 10;
}
.titara-mock__base {
	height: 16px; border-radius: 0 0 14px 14px;
	background: linear-gradient(#2a2f31, #16191a);
	position: relative; z-index: 2;
	box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.titara-mock__base::after {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 90px; height: 6px; border-radius: 0 0 8px 8px; background: #0c0e0f;
}

.titara-mock__phone {
	position: absolute; right: -14px; bottom: 6px; z-index: 4;
	width: 146px; aspect-ratio: 9 / 19;
	background: #0c1211; border: 3px solid #23282a; border-radius: 22px; padding: 8px 6px;
	box-shadow: var(--shadow-lg);
}
.titara-mock__phone-screen { height: 100%; border-radius: 14px; overflow: hidden; background: #0e1413; }

/* ---------- App UI (laptop) ---------- */
.ui-app { display: flex; height: 100%; font-size: 10px; color: #d7ddda; background: #f7f9f8; }
.ui-side { width: 26%; background: #0f2a23; color: #cfe5dd; padding: 10px 8px; }
.ui-side__brand { font-weight: 800; letter-spacing: .1em; color: #fff; font-size: 11px; margin-bottom: 12px; }
.ui-side__nav li { display: flex; align-items: center; gap: 6px; padding: 6px 6px; border-radius: 6px; color: #9fc4b8; margin-bottom: 2px; }
.ui-side__nav li.is-active { background: var(--emerald); color: #06231a; font-weight: 700; }
.ui-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }

.ui-body { flex: 1; background: #f4f7f5; color: #1c2a25; padding: 10px; overflow: hidden; }
.ui-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ui-topbar__title { font-weight: 800; font-size: 12px; }
.ui-pill { background: #fff; border: 1px solid #e2e8e5; border-radius: 20px; padding: 3px 8px; color: #556; }

.ui-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.ui-stat { background: #fff; border: 1px solid #e8ecea; border-radius: 8px; padding: 7px; display: flex; flex-direction: column; gap: 2px; }
.ui-stat__label { color: #7a857f; font-size: 8px; }
.ui-stat__value { font-weight: 800; font-size: 14px; color: #14241d; }
.ui-stat__value.ui-danger { color: #d9534f; }
.ui-stat__delta { font-size: 8px; font-weight: 700; }
.ui-up { color: var(--emerald); } .ui-down { color: #b98; }

.ui-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.ui-card { background: #fff; border: 1px solid #e8ecea; border-radius: 8px; padding: 8px; }
.ui-card__head { display: flex; justify-content: space-between; font-weight: 700; font-size: 9px; margin-bottom: 6px; }
.ui-muted { color: #9aa39e; font-weight: 500; }

.ui-bars { display: flex; align-items: flex-end; gap: 3px; height: 74px; }
.ui-bar { flex: 1; background: linear-gradient(#2fc98a, #16a06a); border-radius: 2px 2px 0 0; }

.ui-joblist li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #f0f3f1; }
.ui-date { color: #8a938e; width: 30px; font-size: 8px; }
.ui-job { flex: 1; font-weight: 700; font-size: 9px; }
.ui-job em { display: block; font-style: normal; font-weight: 500; color: #99a29d; }
.ui-tag { font-size: 7px; padding: 2px 5px; border-radius: 10px; background: #eef6f2; color: #16a06a; font-weight: 700; }
.ui-tag--today { background: var(--emerald); color: #fff; }

/* ---------- Phone UI ---------- */
.ui-phone { padding: 8px 6px; height: 100%; background: #0f2a23; color: #eaf3ef; }
.ui-phone__brand { font-weight: 800; letter-spacing: .12em; font-size: 9px; text-align: center; margin-bottom: 8px; color: #fff; }
.ui-phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ui-tile {
	display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
	padding: 7px 6px; font-size: 8px; font-weight: 700; color: #eaf3ef;
}
.ui-tile .titara-icon { color: var(--t); }
.ui-phone__foot { margin-top: 8px; text-align: center; font-size: 7.5px; color: #9fc4b8; }

/* =========================================================================
   TRUST STRIP
   ========================================================================= */
.titara-trust { background: var(--light-2); color: var(--ink); padding: 34px 0; border-bottom: 1px solid #e9ebe6; }
.titara-trust__eyebrow { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8b948f; margin-bottom: 22px; }
.titara-trust__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px; }
.titara-trust__item { display: flex; align-items: center; gap: 10px; color: #2c3a34; font-weight: 700; font-size: 15px; }
.titara-trust__item .titara-icon { color: var(--gold); }

/* =========================================================================
   PRODUCTS
   ========================================================================= */
.titara-products__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.titara-card {
	position: relative; display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--card), #101413);
	border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.titara-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 30px 60px rgba(0,0,0,.45); }

.titara-card__shot {
	position: relative; padding: 18px 18px 0; overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%),
		linear-gradient(180deg, #0d1211, #0b0f0e);
}
.titara-card__shot .ui-mini { transition: transform .4s var(--ease); }
.titara-card:hover .titara-card__shot .ui-mini { transform: translateY(-4px) scale(1.02); }

.titara-card__badge {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	background: var(--grad-gold-btn); color: #211703; font-size: 11px; font-weight: 800;
	padding: 5px 10px; border-radius: 20px; box-shadow: var(--shadow-sm);
}

.titara-card__body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.titara-card__icon {
	display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center;
	color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); margin-bottom: 2px;
}
.titara-card__title { font-size: 20px; }
.titara-card__headline { color: var(--gold-lt); font-weight: 600; font-size: 14px; }
.titara-card__desc { color: var(--text-2); font-size: 14px; }
.titara-card__builtfor { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.titara-card__builtfor span { color: var(--text-2); font-weight: 700; }

.titara-card__foot {
	margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid var(--border);
}
.titara-card__price { font-size: 22px; font-weight: 800; color: var(--white); }

/* ---------- Mini mockup ---------- */
.ui-mini {
	border-radius: 12px 12px 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-bottom: none;
	background: #0e1413; box-shadow: 0 -2px 0 rgba(255,255,255,.02); font-size: 9px;
}
.ui-mini__bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; background: color-mix(in srgb, var(--accent) 30%, #0e1413); }
.ui-mini__brand { font-weight: 800; letter-spacing: .08em; color: #fff; font-size: 9px; }
.ui-mini__dots { display: flex; gap: 3px; } .ui-mini__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); }
.ui-mini__body { padding: 9px; }
.ui-mini__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 8px; }
.ui-mini__stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 6px; color: #99a29d; display: flex; flex-direction: column; }
.ui-mini__stat em { font-style: normal; font-weight: 800; font-size: 12px; color: #fff; }
.ui-mini__chart { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-bottom: 8px; }
.ui-mini__chart span { flex: 1; background: linear-gradient(color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); border-radius: 2px 2px 0 0; }
.ui-mini__rows li { display: flex; align-items: center; gap: 6px; padding: 3px 0; color: #b6bdb9; border-bottom: 1px solid rgba(255,255,255,.05); }
.ui-mini__tick { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px solid var(--accent); flex: none; }

/* =========================================================================
   WHY TITARA
   ========================================================================= */
.titara-why__grid {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.titara-why__item {
	background: var(--light-2); border: 1px solid #e7e9e4; border-radius: 16px; padding: 26px 20px; text-align: center;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.titara-why__item:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(20,32,28,.09); }
.titara-why__icon {
	display: inline-flex; width: 54px; height: 54px; border-radius: 14px; align-items: center; justify-content: center;
	color: var(--gold); background: #fff7e8; border: 1px solid #f0e0bd; margin-bottom: 16px;
}
.titara-why__title { font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.titara-why__text { font-size: 14px; color: #5c655f; }

/* =========================================================================
   STATEMENT
   ========================================================================= */
.titara-statement { text-align: center; overflow: hidden; }
.titara-statement__glow {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 60% at 50% 40%, rgba(217,164,65,.12) 0%, transparent 70%);
}
.titara-statement__inner { position: relative; max-width: 900px; margin: 0 auto; }
.titara-statement__title { font-size: clamp(30px, 4.6vw, 54px); margin-bottom: 22px; }
.titara-statement__text { color: var(--text-2); font-size: clamp(16px,1.8vw,20px); max-width: 720px; margin: 0 auto 14px; }
.titara-statement__text--muted { color: var(--muted); font-size: 16px; }
.titara-statement__highlight {
	margin-top: 30px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; color: var(--gold-lt);
}
.titara-statement__highlight span { color: var(--gold); }

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.titara-how__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch;
}
.titara-how__step {
	position: relative; background: linear-gradient(180deg, var(--bg-2), #0d1110);
	border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px;
}
.titara-how__num {
	position: absolute; top: 18px; right: 22px; font-size: 40px; font-weight: 800; color: rgba(217,164,65,.16);
}
.titara-how__icon {
	display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center;
	color: var(--gold-hi); background: rgba(217,164,65,.1); border: 1px solid var(--border-gold); margin-bottom: 18px;
}
.titara-how__title { font-size: 20px; margin-bottom: 10px; }
.titara-how__text { color: var(--text-2); font-size: 14.5px; }
.titara-how__arrow {
	position: absolute; top: 50%; right: -24px; transform: translateY(-50%); z-index: 3;
	color: var(--gold); background: var(--bg); border-radius: 50%;
}

.titara-how__grow {
	grid-column: 1 / -1;
	display: flex; align-items: center; gap: 20px;
	background: linear-gradient(120deg, rgba(217,164,65,.12), rgba(217,164,65,.02));
	border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 26px 30px; margin-top: 6px;
}
.titara-how__grow-icon {
	display: inline-flex; width: 60px; height: 60px; border-radius: 16px; align-items: center; justify-content: center;
	color: #211703; background: var(--grad-gold); flex: none; box-shadow: var(--shadow-gold);
}
.titara-how__grow-title { font-size: 20px; color: var(--gold-lt); margin-bottom: 4px; }
.titara-how__grow p { color: var(--text-2); }

/* =========================================================================
   BENEFIT
   ========================================================================= */
.titara-benefit { text-align: center; }
.titara-benefit__inner { max-width: 820px; margin: 0 auto; }
.titara-benefit__title { font-size: clamp(30px, 4.4vw, 52px); color: var(--ink); margin-bottom: 24px; }
.titara-benefit__text { color: #55605a; font-size: clamp(15px,1.7vw,18px); margin-bottom: 24px; }
.titara-benefit__lead { font-size: clamp(18px,2.2vw,24px); color: var(--ink); margin-bottom: 30px; }
.titara-benefit__lead strong { color: var(--gold); }
.titara-benefit.titara-section--dark .titara-benefit__title { color: var(--white); }
.titara-benefit.titara-section--dark .titara-benefit__text { color: var(--text-2); }
.titara-benefit.titara-section--dark .titara-benefit__lead { color: var(--white); }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.titara-testimonials__notice {
	max-width: 760px; margin: 0 auto 28px; text-align: center; font-size: 13px;
	background: #fff6e2; color: #8a6d1f; border: 1px dashed #e3c987; border-radius: 10px; padding: 10px 16px;
}
.titara-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.titara-testimonial {
	position: relative; margin: 0; background: #fff; border: 1px solid #e8eae5; border-radius: 16px; padding: 28px 24px;
	box-shadow: 0 12px 30px rgba(20,32,28,.05); display: flex; flex-direction: column; gap: 16px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.titara-testimonial:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(20,32,28,.1); }
.titara-testimonial__quote-icon { color: var(--gold); opacity: .55; }
.titara-testimonial__quote { margin: 0; font-size: 16px; color: #2a352f; line-height: 1.55; font-weight: 500; }
.titara-testimonial__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.titara-testimonial__avatar {
	width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: #eef1ee; color: #8a948e;
}
.titara-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.titara-testimonial__meta { display: flex; flex-direction: column; margin-right: auto; }
.titara-testimonial__meta strong { color: var(--ink); font-size: 14px; }
.titara-testimonial__meta em { font-style: normal; font-size: 12.5px; color: #8a948e; }
.titara-testimonial__stars { display: inline-flex; gap: 1px; color: var(--gold); }
.titara-testimonial__stars .is-filled { fill: var(--gold); }

/* =========================================================================
   FAQ
   ========================================================================= */
.titara-faq__inner { max-width: 860px; margin: 0 auto; }
.titara-accordion { display: flex; flex-direction: column; gap: 12px; }
.titara-accordion__item {
	background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
	transition: border-color .25s var(--ease);
}
.titara-accordion__item.is-open { border-color: var(--border-gold); }
.titara-accordion__heading { margin: 0; }
.titara-accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: transparent; border: 0; color: var(--white); text-align: left;
	padding: 20px 22px; font-size: 16.5px; font-weight: 700; line-height: 1.4;
}
.titara-accordion__icon { position: relative; width: 18px; height: 18px; flex: none; }
.titara-accordion__icon::before,
.titara-accordion__icon::after {
	content: ""; position: absolute; background: var(--gold); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.titara-accordion__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.titara-accordion__icon::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.titara-accordion__item.is-open .titara-accordion__icon::after { transform: rotate(90deg); opacity: 0; }
.titara-accordion__panel { padding: 0 22px 22px; color: var(--text-2); font-size: 15px; }
.titara-accordion__panel[hidden] { display: none; }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.titara-cta {
	position: relative; overflow: hidden; text-align: center;
	padding: clamp(72px, 9vw, 130px) 0;
	background:
		linear-gradient(180deg, rgba(11,13,13,.7), rgba(11,13,13,.9)),
		radial-gradient(80% 120% at 50% 0%, #241b0d 0%, #0b0d0d 60%);
	color: var(--white);
}
.titara-cta__glow {
	position: absolute; left: 50%; top: 40%; width: 620px; height: 320px; transform: translate(-50%,-30%);
	background: radial-gradient(circle, rgba(217,164,65,.22) 0%, transparent 70%); pointer-events: none;
}
.titara-cta__inner { position: relative; max-width: 780px; margin: 0 auto; }
.titara-cta__title { font-size: clamp(32px, 5vw, 58px); margin-bottom: 18px; }
.titara-cta__text { color: var(--text-2); font-size: clamp(16px,1.8vw,19px); margin-bottom: 30px; }
.titara-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.titara-footer { background: #070909; color: var(--text-2); padding-top: 64px; border-top: 1px solid var(--border); }
.titara-footer__grid {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px;
}
.titara-footer__logo, .titara-footer .custom-logo { height: 40px; width: auto; margin-bottom: 14px; }
.titara-footer__tagline { color: var(--gold-lt); font-weight: 700; margin-bottom: 12px; font-size: 14px; }
.titara-footer__desc { font-size: 14px; max-width: 340px; margin-bottom: 20px; }
.titara-footer__social { display: flex; gap: 10px; }
.titara-footer__social a {
	width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center; color: var(--text-2);
	transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.titara-footer__social a:hover { color: var(--gold); border-color: var(--border-gold); background: rgba(217,164,65,.08); }

.titara-footer__heading { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.titara-footer__list { display: flex; flex-direction: column; gap: 10px; }
.titara-footer__list a { font-size: 14px; color: var(--text-2); transition: color .2s var(--ease); }
.titara-footer__list a:hover { color: var(--gold); }

.titara-footer__bottom { border-top: 1px solid var(--border); padding: 22px 0; }
.titara-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.titara-footer__copy { font-size: 13px; color: var(--muted); }
.titara-footer__disclaimer { font-size: 12px; color: #5f645f; max-width: 620px; }

/* Back to top */
.titara-to-top {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border-gold);
	background: rgba(20,17,12,.9); color: var(--gold); backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transform: translateY(12px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
}
.titara-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.titara-to-top:hover { background: rgba(217,164,65,.16); }
.titara-to-top__icon { transform: rotate(-90deg); }

/* Fallback (blog/404) */
.titara-fallback { padding-top: 100px; max-width: 800px; }
.titara-fallback__title { font-size: 34px; margin-bottom: 18px; }
.titara-fallback__content { color: var(--text-2); }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes titara-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
[data-float] { animation: titara-float 6s ease-in-out infinite; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1199px) {
	.titara-hero__inner { gap: 32px; }
	.titara-why__grid { grid-template-columns: repeat(3, 1fr); }
	.titara-products__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
	.titara-nav, .titara-header__cta { display: none; }
	.titara-burger { display: inline-flex; margin-left: auto; }

	.titara-hero { padding-top: 116px; }
	.titara-hero__inner { grid-template-columns: 1fr; min-height: 0; }
	.titara-hero__visual { margin-top: 20px; max-width: 620px; }
	.titara-badge-circle { width: 92px; height: 92px; top: -20px; }

	.titara-how__grid { grid-template-columns: 1fr; }
	.titara-how__arrow { display: none; }
	.titara-how__grow { flex-direction: column; text-align: center; }

	.titara-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 767px) {
	:root { --gutter: 16px; }
	.titara-products__grid,
	.titara-why__grid,
	.titara-testimonials__grid { grid-template-columns: 1fr; }
	.titara-why__grid { max-width: 420px; margin: 0 auto; }

	.titara-hero__title { font-size: clamp(34px, 10vw, 50px); }
	.titara-hero__features { gap: 18px 26px; }
	.titara-hero__actions { flex-direction: column; }
	.titara-hero__actions .titara-btn { width: 100%; }
	.titara-cta__actions .titara-btn { width: 100%; }

	.titara-hero__chip { display: none; }
	.titara-annotation { display: none; }

	.titara-footer__grid { grid-template-columns: 1fr; }
	.titara-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
	.titara-trust__list { gap: 14px 22px; }
	.titara-trust__item { font-size: 13.5px; }
}

@media (max-width: 400px) {
	.titara-badge-circle { display: none; }
	.titara-mock__phone { width: 118px; right: -6px; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	[data-reveal] { opacity: 1; transform: none; }
	[data-float] { animation: none; }
}

/* =========================================================================
   HEADER EXTRAS — announcement bar, actions, cart
   ========================================================================= */
.titara-topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 40px;
	display: flex; align-items: center;
	background: linear-gradient(90deg, #0e1110, #14110c);
	border-bottom: 1px solid var(--border-gold);
	color: var(--gold-lt); font-size: 13px; font-weight: 600;
}
.titara-topbar .titara-container { text-align: center; }
.titara-topbar span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.has-topbar .titara-header { top: 40px; }
body.has-topbar .titara-hero { padding-top: 168px; }

.titara-header__actions { display: flex; align-items: center; gap: 12px; }
.titara-header__cta-btn { padding: 11px 18px; }

/* Hero used as an Elementor widget doesn't need to clear the theme's fixed header. */
.titara-hero--widget,
body.has-topbar .titara-hero--widget { padding-top: clamp(64px, 8vw, 110px); }

.titara-cart-link {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border);
	color: var(--white); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.titara-cart-link:hover { color: var(--gold); border-color: var(--border-gold); background: rgba(217,164,65,.08); }
.titara-cart-link__count {
	position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--grad-gold-btn); color: #14110A; font-size: 11px; font-weight: 800; border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* =========================================================================
   PAGE BANNER + BREADCRUMBS
   ========================================================================= */
.titara-page-banner {
	position: relative; overflow: hidden; text-align: center;
	background: var(--grad-hero); padding: 150px 0 60px;
}
body.has-topbar .titara-page-banner { padding-top: 178px; }
.titara-page-banner__glow {
	position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
	width: 700px; height: 500px; pointer-events: none;
	background: radial-gradient(circle, rgba(217,164,65,.16) 0%, transparent 65%);
}
.titara-page-banner__inner { position: relative; max-width: 820px; margin: 0 auto; }
.titara-page-banner__title { font-size: clamp(30px, 4.4vw, 52px); color: var(--white); }
.titara-page-banner__subtitle { margin-top: 14px; color: var(--text-2); font-size: clamp(15px,1.6vw,18px); }

.titara-breadcrumbs { margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.titara-breadcrumbs a { color: var(--text-2); }
.titara-breadcrumbs a:hover { color: var(--gold); }
.titara-breadcrumbs__sep { color: rgba(255,255,255,.25); margin: 0 4px; }

/* =========================================================================
   PRODUCTS GRID — column variants (Elementor widget)
   ========================================================================= */
.titara-products__grid--cols2 { grid-template-columns: repeat(2, 1fr); }
.titara-products__grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.titara-products__grid--cols4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================================
   ENTRY / PAGE CONTENT
   ========================================================================= */
.titara-entry { max-width: 820px; margin: 0 auto; color: var(--ink); font-size: 17px; line-height: 1.75; }
.titara-entry__thumb { margin-bottom: 28px; border-radius: var(--radius); overflow: hidden; }
.titara-entry h2 { font-size: 28px; margin: 32px 0 14px; color: var(--ink); }
.titara-entry h3 { font-size: 22px; margin: 26px 0 12px; color: var(--ink); }
.titara-entry p { margin: 0 0 18px; }
.titara-entry a { color: #b9822a; text-decoration: underline; }
.titara-entry ul, .titara-entry ol { margin: 0 0 18px 1.2em; }
.titara-entry li { margin-bottom: 8px; }
.titara-entry blockquote {
	margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--gold);
	background: #fff; border-radius: 0 10px 10px 0; color: #3a453f; font-style: italic;
}
.titara-entry img { border-radius: 10px; }
.titara-entry__meta { margin-top: 28px; padding-top: 18px; border-top: 1px solid #e3e6e0; font-size: 14px; color: #6b746e; }
.titara-page-links { margin-top: 18px; font-weight: 700; }

/* =========================================================================
   BLOG ARCHIVE / SEARCH
   ========================================================================= */
.titara-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.titara-post-card {
	background: #fff; border: 1px solid #e7e9e4; border-radius: 16px; overflow: hidden;
	display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.titara-post-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px rgba(20,32,28,.1); }
.titara-post-card__thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: #eef1ee; }
.titara-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.titara-post-card:hover .titara-post-card__thumb img { transform: scale(1.04); }
.titara-post-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.titara-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.titara-post-card__date { font-size: 12.5px; color: #8a948e; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.titara-post-card__title { font-size: 20px; color: var(--ink); }
.titara-post-card__title a:hover { color: #b9822a; }
.titara-post-card__excerpt { color: #5c655f; font-size: 14.5px; }
.titara-post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: #b9822a; font-weight: 700; font-size: 14px; }
.titara-post-card__more .titara-icon { transition: transform .25s var(--ease); }
.titara-post-card__more:hover .titara-icon { transform: translateX(3px); }
.titara-noresults { color: #55605a; font-size: 18px; margin-bottom: 20px; }

.navigation.pagination { margin-top: 40px; display: flex; justify-content: center; }
.navigation.pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid #dcdfd9; border-radius: 10px; color: var(--ink); font-weight: 700; background: #fff;
}
.navigation.pagination .page-numbers.current { background: var(--grad-gold-btn); border-color: transparent; color: #14110A; }
.navigation.pagination a.page-numbers:hover { border-color: var(--gold); color: #b9822a; }

/* =========================================================================
   SEARCH FORM
   ========================================================================= */
.search-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.search-form .search-field {
	flex: 1; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--border);
	background: rgba(255,255,255,.04); color: var(--white); font-size: 15px;
}
.titara-section--light .search-form .search-field { background: #fff; border-color: #dcdfd9; color: var(--ink); }
.search-form .search-submit { padding: 13px 20px; border-radius: 10px; border: 0; background: var(--grad-gold-btn); color: #14110A; font-weight: 700; cursor: pointer; }

/* =========================================================================
   SIDEBAR WIDGETS
   ========================================================================= */
.titara-widget { background: #fff; border: 1px solid #e7e9e4; border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.titara-widget__title { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.titara-widget ul { display: flex; flex-direction: column; gap: 8px; }
.titara-widget a { color: #55605a; font-size: 14.5px; }
.titara-widget a:hover { color: #b9822a; }

/* =========================================================================
   COMMENTS
   ========================================================================= */
.titara-comments { max-width: 820px; margin: 40px auto 0; }
.titara-comments__title, .titara-comments__reply-title { font-size: 22px; color: var(--ink); margin-bottom: 18px; }
.titara-comments__list { list-style: none; margin: 0 0 26px; padding: 0; }
.titara-comments__list .comment-body { padding: 16px 0; border-bottom: 1px solid #e7e9e4; }
.titara-comments__list .comment-author .fn { color: var(--ink); font-weight: 700; }
.titara-comments .comment-form input[type="text"],
.titara-comments .comment-form input[type="email"],
.titara-comments .comment-form input[type="url"],
.titara-comments .comment-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid #dcdfd9; border-radius: 10px; font-size: 15px; margin-top: 6px;
}
.titara-comments .comment-form p { margin-bottom: 14px; }

/* =========================================================================
   404 SEARCH
   ========================================================================= */
.titara-404__search { margin-top: 30px; }

/* =========================================================================
   RESPONSIVE — new components
   ========================================================================= */
@media (max-width: 991px) {
	.titara-header__cta-btn { display: none; }
	.titara-products__grid--cols3,
	.titara-products__grid--cols4 { grid-template-columns: repeat(2, 1fr); }
	.titara-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.titara-products__grid--cols2,
	.titara-products__grid--cols3,
	.titara-products__grid--cols4 { grid-template-columns: 1fr; }
	.titara-posts { grid-template-columns: 1fr; }
	body.has-topbar .titara-hero { padding-top: 156px; }
	.titara-topbar { font-size: 12px; }
}