@font-face {
 font-family: 'Anjali Old Lipi';
 src: url('../fonts/Anjali_Old_Lipi.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Dyuthi';
 src: url('../fonts/Dyuthi.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Meera';
 src: url('../fonts/Meera.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Rachana';
 src: url('../fonts/Rachana.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Suruma';
 src: url('../fonts/Suruma.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Kartika';
 src: url('../fonts/Kartika.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Lohit Malayalam';
 src: url('../fonts/Lohit_Malayalam.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Chilanka';
 src: url('../fonts/Chilanka.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Gayathri';
 src: url('../fonts/Gayathri.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Samyak Malayalam';
 src: url('../fonts/Samyak_Malayalam.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

:root {
 
 --bg-body: #F8FAFC;
 --bg-card: #FFFFFF;
 --bg-card-hover: #F8FAFC;
 --bg-subtle: #F1F5F9;
 --bg-nav: #FFFFFF;
 --bg-footer: #0F172A;

 
 --text-main: #0F172A;
 --text-muted: #475569;
 --text-light: #64748B;
 --text-dim: #94A3B8;
 --text-white: #FFFFFF;

 
 --primary: #E11D48;
 --primary-hover: #BE123C;
 --primary-light: #FFF1F2;
 --primary-border: #FECDD3;

 
 --border: #E2E8F0;
 --border-strong: #CBD5E1;
 --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
 --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
 --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
 --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.1);

 
 --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
 --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
 --font-serif: 'Playfair Display', Georgia, serif;
 --font-malayalam: 'Noto Sans Malayalam', 'Meera', 'Rachana', sans-serif;

 
 --r-sm: 6px;
 --r: 10px;
 --r-lg: 16px;
 --r-full: 9999px;
 --max: 1180px;
 --nav-h: 68px;
}

*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
 color-scheme: light;
}

body {
 font-family: var(--font-sans);
 background-color: var(--bg-body);
 color: var(--text-main);
 line-height: 1.6;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

a {
 color: inherit;
 text-decoration: none;
 transition: all 0.15s ease;
}

button {
 font-family: var(--font-sans);
 cursor: pointer;
 border: none;
 outline: none;
 background: none;
 transition: all 0.15s ease;
}

img {
 display: block;
 max-width: 100%;
}

.nav {
 position: sticky;
 top: 0;
 z-index: 500;
 height: var(--nav-h);
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.nav-inner {
 max-width: var(--max);
 margin: 0 auto;
 padding: 0 1.5rem;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.5rem;
}

.nav-logo {
 display: flex;
 align-items: center;
 gap: 6px;
 font-family: var(--font-display);
 font-size: 1.3rem;
 font-weight: 800;
 color: var(--text-main);
 letter-spacing: -0.3px;
}

.nav-logo .hi {
 color: var(--primary);
 font-family: var(--font-malayalam);
 font-weight: 800;
 font-size: 1.35rem;
}

.nav-logo .dot {
 color: var(--primary);
 font-size: 1.2rem;
}

.nav-links {
 display: flex;
 align-items: center;
 gap: 4px;
 list-style: none;
}

.nav-links a {
 color: var(--text-muted);
 font-size: 0.88rem;
 font-weight: 600;
 padding: 8px 14px;
 border-radius: var(--r-full);
}

.nav-links a:hover {
 color: var(--text-main);
 background: var(--bg-subtle);
}

.nav-links a.active {
 color: var(--primary);
 background: var(--primary-light);
}

.nav-cta {
 background: var(--primary) !important;
 color: #FFFFFF !important;
 padding: 9px 20px !important;
 border-radius: var(--r-full) !important;
 font-weight: 600 !important;
 font-size: 0.88rem !important;
 box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}

.nav-cta:hover {
 background: var(--primary-hover) !important;
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
}

.btn-primary {
 background: #E11D48 !important;
 color: #FFFFFF !important;
 font-family: var(--font-sans);
 font-weight: 700 !important;
 border-radius: var(--r) !important;
 border: 1.5px solid #E11D48 !important;
 padding: 8px 18px !important;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25) !important;
 transition: all 0.2s ease;
 text-decoration: none;
}

.btn-primary:hover {
 background: #BE123C !important;
 border-color: #BE123C !important;
 box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
}

.btn-ghost {
 background: transparent;
 color: var(--text-main);
 font-family: var(--font-sans);
 font-weight: 600;
 border-radius: var(--r);
 border: 1.5px solid var(--border);
 padding: 8px 18px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.2s ease;
 text-decoration: none;
}

.btn-ghost:hover {
 background: var(--bg-subtle);
 border-color: var(--border-strong);
 color: var(--primary);
}

.gen-action-btn {
 background: #FFFFFF;
 color: var(--text-main);
 font-family: var(--font-sans);
 font-weight: 600;
 font-size: 0.82rem;
 border-radius: var(--r-sm);
 border: 1.5px solid var(--border);
 padding: 6px 14px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.15s ease;
}

.gen-action-btn:hover {
 background: var(--bg-subtle);
 border-color: var(--border-strong);
 color: var(--primary);
}

.sample-chip {
 background: #FFFFFF;
 color: var(--text-muted);
 font-family: var(--font-sans);
 font-size: 0.8rem;
 font-weight: 600;
 border: 1.5px solid var(--border);
 border-radius: var(--r-full);
 padding: 5px 12px;
 cursor: pointer;
 transition: all 0.15s ease;
 display: inline-flex;
 align-items: center;
}

.sample-chip:hover {
 background: var(--primary-light);
 border-color: var(--primary-border);
 color: var(--primary);
}

.conv-tab-group {
 display: inline-flex;
 background: #F1F5F9;
 padding: 4px;
 border-radius: var(--r);
 border: 1.5px solid var(--border);
 gap: 4px;
}

.conv-tab-btn {
 padding: 7px 16px;
 font-size: 0.84rem;
 font-weight: 600;
 border-radius: var(--r-sm);
 border: none;
 background: transparent;
 color: var(--text-muted);
 cursor: pointer;
 transition: all 0.2s ease;
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

.conv-tab-btn:hover {
 color: var(--text-main);
 background: rgba(255, 255, 255, 0.7);
}

.conv-tab-btn.active {
 background: #E11D48 !important;
 color: #FFFFFF !important;
 font-weight: 700 !important;
 box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}

.hamburger {
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 5px;
 width: 38px;
 height: 38px;
 border-radius: var(--r-sm);
 background: var(--bg-subtle);
 border: 1px solid var(--border);
}

.hamburger span {
 display: block;
 width: 18px;
 height: 2px;
 background: var(--text-main);
 border-radius: 2px;
 transition: transform 0.2s ease, opacity 0.15s ease;
}

.hamburger.open span:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
 opacity: 0;
}

.hamburger.open span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

.mob-nav {
 display: none;
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
 padding: 1rem 1.5rem;
}

.mob-nav a {
 display: block;
 color: var(--text-muted);
 padding: 0.75rem 0.5rem;
 font-size: 0.95rem;
 font-weight: 600;
 border-bottom: 1px solid var(--border);
}

.mob-nav a:last-child {
 border-bottom: none;
}

.mob-nav a:hover {
 color: var(--primary);
}

.hero {
 position: relative;
 overflow: hidden;
 padding: 4.5rem 1.5rem 3.5rem;
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
}

.hero-deco {
 position: absolute;
 right: -20px;
 top: 50%;
 transform: translateY(-50%);
 font-family: 'Rachana', 'Noto Sans Malayalam', sans-serif;
 font-size: clamp(220px, 30vw, 400px);
 font-weight: 800;
 color: rgba(15, 23, 42, 0.02);
 line-height: 1;
 pointer-events: none;
 user-select: none;
 letter-spacing: -15px;
}

.hero-inner {
 max-width: var(--max);
 margin: 0 auto;
 position: relative;
 z-index: 2;
}

.hero-badge-pill {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--primary-light);
 border: 1px solid var(--primary-border);
 padding: 5px 14px;
 border-radius: var(--r-full);
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: 1.25rem;
}

.pulse-dot {
 width: 8px;
 height: 8px;
 background: var(--primary);
 border-radius: 50%;
}

.hero h1 {
 font-family: var(--font-display);
 font-size: clamp(2.2rem, 5vw, 3.8rem);
 font-weight: 800;
 line-height: 1.15;
 color: var(--text-main);
 letter-spacing: -1px;
 margin-bottom: 1.2rem;
 max-width: 860px;
}

.hero h1 .text-gradient {
 color: var(--primary);
}

.hero-sub {
 color: var(--text-muted);
 font-size: 1.05rem;
 max-width: 620px;
 line-height: 1.65;
 margin-bottom: 1.75rem;
 font-weight: 400;
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 align-items: center;
 margin-bottom: 3rem;
}

.btn-primary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: var(--primary);
 color: #FFFFFF;
 padding: 13px 26px;
 border-radius: var(--r-full);
 font-size: 0.92rem;
 font-weight: 700;
 box-shadow: 0 2px 10px rgba(225, 29, 72, 0.25);
 transition: all 0.15s ease;
}

.btn-primary:hover {
 background: var(--primary-hover);
 transform: translateY(-1px);
 box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}

.btn-ghost {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: var(--bg-subtle);
 color: var(--text-main);
 padding: 13px 24px;
 border-radius: var(--r-full);
 font-size: 0.92rem;
 font-weight: 600;
 border: 1px solid var(--border);
 transition: all 0.15s ease;
}

.btn-ghost:hover {
 background: #E2E8F0;
 transform: translateY(-1px);
}

.hero-stats {
 padding-top: 1.75rem;
 border-top: 1px solid var(--border);
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 gap: 1.25rem;
}

.hero-stat-card {
 background: var(--bg-subtle);
 border: 1px solid var(--border);
 padding: 0.9rem 1.2rem;
 border-radius: var(--r);
}

.hero-stat-n {
 font-family: var(--font-display);
 font-size: 1.8rem;
 font-weight: 800;
 color: var(--text-main);
 line-height: 1;
}

.hero-stat-l {
 font-size: 0.78rem;
 color: var(--text-light);
 margin-top: 4px;
 font-weight: 600;
}

.marquee-strip {
 background: var(--primary);
 overflow: hidden;
 padding: 0.8rem 0;
 color: #FFFFFF;
}

.marquee-track {
 display: flex;
 gap: 3rem;
 width: max-content;
 animation: marquee-anim 28s linear infinite;
}

.marquee-strip:hover .marquee-track {
 animation-play-state: paused;
}

@keyframes marquee-anim {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

.marquee-item {
 color: #FFFFFF;
 font-size: 1.15rem;
 font-weight: 600;
 white-space: nowrap;
 letter-spacing: 0.3px;
 display: flex;
 align-items: center;
 gap: 1.5rem;
}

.marquee-item::after {
 content: '•';
 font-size: 1.2rem;
 opacity: 0.7;
}

.gen-section {
 background: var(--bg-body);
 padding: 3rem 0 4.5rem;
}

.gen-container {
 max-width: var(--max);
 margin: 0 auto;
 padding: 0 1.5rem;
}

.gen-header {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 1rem;
 margin-bottom: 1.5rem;
}

.gen-title-group h2 {
 font-family: var(--font-display);
 font-size: 2rem;
 font-weight: 800;
 color: var(--text-main);
 letter-spacing: -0.5px;
 margin-bottom: 0.25rem;
}

.gen-title-group p {
 color: var(--text-light);
 font-size: 0.9rem;
}

.gen-title-group strong {
 color: var(--primary);
}

.studio-toolbar {
 background: #FFFFFF;
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 0.9rem 1.2rem;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 margin-bottom: 1.25rem;
 box-shadow: var(--shadow-xs);
}

.toolbar-group {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.toolbar-label {
 font-size: 0.78rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.6px;
 color: var(--text-light);
}

.size-slider-wrap {
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--bg-subtle);
 padding: 4px 10px;
 border-radius: var(--r-full);
 border: 1px solid var(--border);
}

.size-slider-wrap input[type="range"] {
 -webkit-appearance: none;
 appearance: none;
 width: 90px;
 height: 4px;
 border-radius: 4px;
 background: #CBD5E1;
 outline: none;
}

.size-slider-wrap input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: var(--primary);
 cursor: pointer;
}

.size-val {
 font-size: 0.8rem;
 font-weight: 700;
 color: var(--text-main);
 min-width: 32px;
}

.align-seg-ctrl {
 display: flex;
 background: var(--bg-subtle);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 padding: 2px;
}

.align-btn {
 padding: 5px 10px;
 border-radius: var(--r-full);
 color: var(--text-light);
 font-size: 0.8rem;
 display: flex;
 align-items: center;
 justify-content: center;
}

.align-btn:hover {
 color: var(--text-main);
}

.align-btn.active {
 background: #FFFFFF;
 color: var(--text-main);
 box-shadow: var(--shadow-xs);
}

.search-filter-box {
 position: relative;
 display: flex;
 align-items: center;
 min-width: 220px;
}

.search-filter-box input {
 width: 100%;
 padding: 7px 12px 7px 32px;
 background: var(--bg-subtle);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 font-size: 0.84rem;
 color: var(--text-main);
 outline: none;
}

.search-filter-box input:focus {
 border-color: var(--primary);
 background: #FFFFFF;
 box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.search-filter-box svg {
 position: absolute;
 left: 10px;
 color: var(--text-dim);
 pointer-events: none;
}

.theme-toggle-group {
 display: flex;
 gap: 5px;
}

.theme-pill-btn {
 width: 22px;
 height: 22px;
 border-radius: 50%;
 border: 2px solid transparent;
 cursor: pointer;
 transition: transform 0.15s ease, border-color 0.15s ease;
}

.theme-pill-btn.theme-dark { background: #0F172A; }
.theme-pill-btn.theme-light { background: #FFFFFF; border: 1px solid #CBD5E1; }
.theme-pill-btn.theme-velvet { background: #4C1D95; }

.theme-pill-btn.active {
 border-color: var(--primary);
 transform: scale(1.15);
}

.gen-input-wrap {
 margin-bottom: 1.75rem;
}

.gen-input-card {
 background: #FFFFFF;
 border: 1.5px solid var(--border-strong);
 border-radius: var(--r-lg);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
 transition: all 0.2s ease;
}

.gen-input-card:focus-within {
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.gen-ta {
 width: 100%;
 min-height: 85px;
 padding: 1.2rem 1.4rem;
 border: none;
 outline: none;
 resize: vertical;
 font-family: var(--font-malayalam);
 font-size: 1.4rem;
 color: var(--text-main);
 background: transparent;
 line-height: 1.5;
}

.gen-ta::placeholder {
 color: var(--text-dim);
 font-family: var(--font-sans);
 font-size: 1.05rem;
}

.gen-input-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 padding: 0.75rem 1.25rem;
 background: var(--bg-subtle);
 border-top: 1px solid var(--border);
}

.input-counters {
 font-size: 0.8rem;
 color: var(--text-light);
 font-weight: 600;
}

.input-actions-bar {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.gen-action-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 border-radius: var(--r-full);
 font-size: 0.8rem;
 font-weight: 600;
 color: var(--text-muted);
 background: #FFFFFF;
 border: 1px solid var(--border);
 box-shadow: var(--shadow-xs);
}

.gen-action-btn:hover {
 background: #FFFFFF;
 color: var(--text-main);
 border-color: var(--border-strong);
}

.gen-action-btn.active-toggle {
 background: var(--primary-light);
 border-color: var(--primary-border);
 color: var(--primary);
}

.results-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 padding: 0.5rem 0.25rem 1rem;
 font-size: 0.85rem;
 color: var(--text-light);
}

.results-bar strong {
 color: var(--text-main);
}

.font-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 gap: 1.25rem;
 min-height: 400px;
}

.font-grid.loading {
 opacity: 0.6;
}

.font-card {
 background: #FFFFFF;
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 1.4rem;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 1.1rem;
 box-shadow: var(--shadow-sm);
 transition: all 0.2s ease;
}

.font-card:hover {
 transform: translateY(-2px);
 border-color: var(--primary-border);
 box-shadow: var(--shadow-md);
}

.font-card.theme-dark {
 background: #0F172A;
 color: #FFFFFF;
 border-color: #1E293B;
}

.font-card.theme-dark .fc-name { color: #94A3B8; }
.font-card.theme-dark .fc-preview { color: #FFFFFF; }
.font-card.theme-dark .fc-preview-box { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.05); }
.font-card.theme-dark .fc-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: #CBD5E1; }
.font-card.theme-dark .fc-btn:hover { background: rgba(225, 29, 72, 0.2); color: #FFFFFF; }

.font-card.theme-velvet {
 background: #2E1065;
 color: #FFFFFF;
 border-color: #3B0764;
}

.font-card.theme-velvet .fc-name { color: #C4B5FD; }
.font-card.theme-velvet .fc-preview { color: #FFFFFF; }
.font-card.theme-velvet .fc-preview-box { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.05); }
.font-card.theme-velvet .fc-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #EDE9FE; }

.fc-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
}

.fc-name {
 font-size: 0.78rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.6px;
 color: var(--text-light);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.fc-tag {
 font-size: 0.68rem;
 font-weight: 700;
 padding: 2px 7px;
 border-radius: var(--r-full);
 letter-spacing: 0.3px;
 text-transform: uppercase;
 white-space: nowrap;
}

.fc-tag.display { background: #FEF3C7; color: #92400E; }
.fc-tag.serif { background: #DBEAFE; color: #1E40AF; }
.fc-tag.sans { background: #D1FAE5; color: #065F46; }
.fc-tag.calli { background: #F3E8FF; color: #6B21A8; }
.fc-tag.effect { background: var(--primary-light); color: var(--primary); }
.fc-tag.mltt { background: #E0F2FE; color: #0369A1; }

.fc-preview-box {
 padding: 1.1rem;
 background: var(--bg-subtle);
 border-radius: var(--r-sm);
 border: 1px solid var(--border);
 min-height: 90px;
 display: flex;
 align-items: center;
 cursor: pointer;
 transition: all 0.15s ease;
}

.font-card:hover .fc-preview-box {
 border-color: var(--border-strong);
}

.fc-preview {
 width: 100%;
 font-size: clamp(1.4rem, 3vw, 2rem);
 color: var(--text-main);
 line-height: 1.35;
 word-break: break-word;
 user-select: all;
}

.fc-preview.style-bold { font-weight: 800; }
.fc-preview.style-italic { font-style: italic; }

.fc-preview.style-shadow {
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.fc-preview.style-outline {
 -webkit-text-stroke: 1.5px var(--primary);
 color: transparent;
}

.fc-preview.style-3d {
 text-shadow: 2px 2px 0 #CBD5E1, 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.fc-preview.style-hearts::before { content: '❤️ '; }
.fc-preview.style-hearts::after { content: ' ❤️'; }

.fc-preview.style-stars::before { content: '⭐ '; }
.fc-preview.style-stars::after { content: ' ⭐'; }

.fc-preview.style-sparkles::before { content: '✨ '; }
.fc-preview.style-sparkles::after { content: ' ✨'; }

.fc-preview.style-brackets::before { content: '【 '; }
.fc-preview.style-brackets::after { content: ' 】'; }

.fc-preview.style-underline {
 text-decoration: underline;
 text-underline-offset: 5px;
 text-decoration-color: var(--primary);
 text-decoration-thickness: 2px;
}

.fc-preview.style-gradient {
 color: var(--primary);
}

.fc-preview.style-neon {
 color: var(--primary);
 font-weight: 700;
}

.fc-preview.style-vintage {
 color: #B45309;
}

.fc-preview.style-fire {
 color: #C2410C;
 font-weight: 700;
}

.fc-btns {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 6px;
}

.fc-btn {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 6px 11px;
 border-radius: var(--r-sm);
 font-size: 0.75rem;
 font-weight: 600;
 border: 1px solid var(--border);
 background: var(--bg-subtle);
 color: var(--text-muted);
 transition: all 0.15s ease;
 white-space: nowrap;
}

.fc-btn:hover {
 border-color: var(--primary-border);
 color: var(--primary);
 background: var(--primary-light);
}

.fc-btn.btn-copy-main {
 background: var(--primary-light);
 border-color: var(--primary-border);
 color: var(--primary);
 font-weight: 700;
}

.fc-btn.btn-copy-main:hover {
 background: var(--primary);
 color: #FFFFFF;
}

.fc-btn.copied {
 border-color: #86EFAC !important;
 color: #15803D !important;
 background: #F0FDF4 !important;
}

.pag-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 padding: 2.5rem 1.5rem 1rem;
}

.pag-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 9px 20px;
 border-radius: var(--r-full);
 border: 1px solid var(--border-strong);
 background: #FFFFFF;
 font-size: 0.88rem;
 font-weight: 600;
 color: var(--text-main);
 box-shadow: var(--shadow-xs);
 transition: all 0.15s ease;
}

.pag-btn:hover:not(:disabled) {
 border-color: var(--primary);
 color: var(--primary);
 background: var(--primary-light);
}

.pag-btn:disabled {
 opacity: 0.4;
 cursor: not-allowed;
}

.pag-info {
 font-size: 0.88rem;
 color: var(--text-light);
 padding: 0 0.5rem;
 font-weight: 500;
}

.pag-info strong {
 color: var(--text-main);
 font-weight: 700;
}

.toast-container {
 position: fixed;
 bottom: 2rem;
 left: 50%;
 transform: translateX(-50%) translateY(100px);
 background: #0F172A;
 color: #FFFFFF;
 padding: 11px 22px;
 border-radius: var(--r-full);
 font-size: 0.88rem;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 8px;
 box-shadow: var(--shadow-lg);
 z-index: 1000;
 opacity: 0;
 pointer-events: none;
 transition: all 0.25s ease;
}

.toast-container.show {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}

.features-section {
 padding: 5rem 1.5rem;
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
}

.section-header {
 max-width: 680px;
 margin: 0 auto 3rem;
 text-align: center;
}

.section-eyebrow {
 display: inline-block;
 color: var(--primary);
 font-size: 0.8rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 0.5rem;
}

.section-title {
 font-family: var(--font-display);
 font-size: clamp(1.8rem, 3.5vw, 2.5rem);
 font-weight: 800;
 line-height: 1.2;
 color: var(--text-main);
 letter-spacing: -0.5px;
 margin-bottom: 0.75rem;
}

.section-sub {
 color: var(--text-light);
 font-size: 1rem;
 line-height: 1.6;
}

.features-layout {
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 1.25rem;
}

.feat-item {
 background: var(--bg-body);
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 1.75rem;
 display: flex;
 gap: 1.25rem;
 transition: all 0.15s ease;
}

.feat-item:hover {
 background: #FFFFFF;
 border-color: var(--border-strong);
 box-shadow: var(--shadow-sm);
}

.feat-num {
 font-family: var(--font-display);
 font-size: 1.4rem;
 font-weight: 800;
 color: var(--primary);
 flex-shrink: 0;
}

.feat-item h3 {
 font-family: var(--font-display);
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--text-main);
 margin-bottom: 0.4rem;
}

.feat-item p {
 font-size: 0.88rem;
 color: var(--text-muted);
 line-height: 1.6;
}

.uc-section {
 padding: 5rem 1.5rem;
 background: var(--bg-body);
 border-bottom: 1px solid var(--border);
}

.uc-grid {
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 1rem;
}

.uc-card {
 background: #FFFFFF;
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 1.5rem 0.8rem;
 text-align: center;
 cursor: pointer;
 transition: all 0.15s ease;
 box-shadow: var(--shadow-xs);
}

.uc-card:hover {
 transform: translateY(-2px);
 border-color: var(--primary-border);
 background: var(--primary-light);
}

.uc-deva {
 font-family: var(--font-malayalam);
 font-size: 2rem;
 font-weight: 800;
 color: var(--primary);
 margin-bottom: 0.4rem;
 line-height: 1;
}

.uc-title {
 font-weight: 700;
 font-size: 0.9rem;
 color: var(--text-main);
 margin-bottom: 0.2rem;
}

.uc-sub {
 font-size: 0.75rem;
 color: var(--text-light);
}

.tools-section {
 padding: 5rem 1.5rem;
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
}

.tools-inner {
 max-width: var(--max);
 margin: 0 auto;
}

.tools-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 1.25rem;
}

.tool-card {
 background: var(--bg-body);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 padding: 2rem 1.75rem;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 1.25rem;
 transition: all 0.15s ease;
}

.tool-card:hover {
 background: #FFFFFF;
 border-color: var(--primary-border);
 box-shadow: var(--shadow-md);
}

.tool-icon {
 width: 48px;
 height: 48px;
 border-radius: var(--r);
 background: var(--primary-light);
 border: 1px solid var(--primary-border);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-malayalam);
 font-size: 1.35rem;
 font-weight: 800;
 color: var(--primary);
}

.tool-card h3 {
 font-family: var(--font-display);
 font-size: 1.3rem;
 font-weight: 700;
 color: var(--text-main);
 margin-bottom: 0.4rem;
}

.tool-card p {
 color: var(--text-muted);
 font-size: 0.9rem;
 line-height: 1.6;
}

.tool-link {
 font-size: 0.88rem;
 font-weight: 700;
 color: var(--primary);
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.faq-section {
 padding: 5rem 1.5rem;
 background: var(--bg-body);
 border-bottom: 1px solid var(--border);
}

.faq-list, .faq-grid {
 max-width: 800px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
}

.faq-item {
 background: #FFFFFF;
 border: 1px solid var(--border);
 border-radius: var(--r);
 overflow: hidden;
 box-shadow: var(--shadow-xs);
}

.faq-q {
 width: 100%;
 padding: 1.15rem 1.4rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 font-family: var(--font-display);
 font-size: 1rem;
 font-weight: 700;
 color: var(--text-main);
 text-align: left;
}

.faq-q .faq-icon {
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background: var(--bg-subtle);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1rem;
 color: var(--primary);
 flex-shrink: 0;
 transition: transform 0.2s ease;
}

.faq-q.open .faq-icon {
 transform: rotate(45deg);
}

.faq-a {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.25s ease, padding 0.25s ease;
 padding: 0 1.4rem;
 color: var(--text-muted);
 font-size: 0.92rem;
 line-height: 1.65;
}

.faq-a.show {
 max-height: 300px;
 padding-bottom: 1.2rem;
}

.blog-section {
 padding: 5rem 1.5rem;
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
}

.blog-inner {
 max-width: var(--max);
 margin: 0 auto;
}

.blog-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
 gap: 1.25rem;
}

.blog-card {
 background: var(--bg-body);
 border: 1px solid var(--border);
 border-radius: var(--r);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 transition: all 0.15s ease;
}

.blog-card:hover {
 background: #FFFFFF;
 border-color: var(--border-strong);
 box-shadow: var(--shadow-sm);
}

.blog-card-art {
 height: 130px;
 background: var(--bg-subtle) !important;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
}

.blog-card-art::after {
 content: attr(data-word);
 font-family: var(--font-malayalam);
 font-size: 2.5rem;
 font-weight: 800;
 color: #CBD5E1;
}

.blog-card-body {
 padding: 1.25rem;
 display: flex;
 flex-direction: column;
 flex: 1;
 justify-content: space-between;
 gap: 0.75rem;
}

.blog-card-label {
 font-size: 0.72rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.6px;
 color: var(--primary);
}

.blog-card h3 {
 font-family: var(--font-display);
 font-size: 1.1rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--text-main);
}

.blog-card p {
 font-size: 0.84rem;
 color: var(--text-muted);
 line-height: 1.5;
}

.blog-card-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding-top: 0.75rem;
 border-top: 1px solid var(--border);
 font-size: 0.75rem;
 color: var(--text-light);
}

.blog-card-foot .read-more {
 color: var(--primary);
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.about-section {
 padding: 5rem 1.5rem;
 background: var(--bg-body);
 border-bottom: 1px solid var(--border);
}

.about-inner {
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 3rem;
 align-items: center;
}

@media (max-width: 900px) {
 .about-inner {
 grid-template-columns: 1fr;
 gap: 2rem;
 }
}

.about-deco-text {
 font-family: var(--font-malayalam);
 font-size: 4rem;
 font-weight: 900;
 color: var(--primary);
 line-height: 1;
 margin-bottom: 0.4rem;
}

.about-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}

.about-cell {
 background: #FFFFFF;
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 1.25rem 1rem;
 text-align: center;
 box-shadow: var(--shadow-xs);
}

.about-cell-n {
 font-family: var(--font-display);
 font-size: 1.8rem;
 font-weight: 800;
 color: var(--text-main);
}

.about-cell-l {
 font-size: 0.75rem;
 color: var(--text-light);
 margin-top: 4px;
 font-weight: 600;
}

.page-hero {
 padding: 4rem 1.5rem 3rem;
 background: #FFFFFF;
 border-bottom: 1px solid var(--border);
}

.page-hero-inner {
 max-width: var(--max);
 margin: 0 auto;
}

.breadcrumb {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 0.82rem;
 color: var(--text-light);
 margin-bottom: 1rem;
}

.breadcrumb a {
 color: var(--text-muted);
}

.breadcrumb a:hover {
 color: var(--primary);
}

.page-hero h1 {
 font-family: var(--font-display);
 font-size: clamp(2rem, 4vw, 3rem);
 font-weight: 800;
 color: var(--text-main);
 letter-spacing: -0.5px;
 line-height: 1.15;
 margin-bottom: 0.75rem;
}

.page-hero .hero-sub {
 color: var(--text-muted);
 font-size: 1rem;
 max-width: 680px;
 line-height: 1.6;
}

.post-layout {
 max-width: var(--max);
 margin: 0 auto;
 padding: 3.5rem 1.5rem;
 display: grid;
 grid-template-columns: 1fr 300px;
 gap: 3rem;
 align-items: start;
}

@media (max-width: 960px) {
 .post-layout {
 grid-template-columns: 1fr;
 gap: 2rem;
 }
}

.post-content {
 color: var(--text-main);
 font-size: 1rem;
 line-height: 1.75;
}

.post-content h2 {
 font-family: var(--font-display);
 font-size: 1.6rem;
 font-weight: 800;
 color: var(--text-main);
 margin: 2.2rem 0 0.8rem;
 letter-spacing: -0.3px;
}

.post-content h3 {
 font-family: var(--font-display);
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--text-main);
 margin: 1.8rem 0 0.6rem;
}

.post-content p {
 margin-bottom: 1.1rem;
}

.post-content ul, .post-content ol {
 margin: 1rem 0 1.25rem 1.5rem;
}

.post-content li {
 margin-bottom: 0.4rem;
}

.post-content a {
 color: var(--primary);
 text-decoration: underline;
 text-underline-offset: 3px;
}

.post-sidebar {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}

.sidebar-widget {
 background: #FFFFFF;
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 1.25rem;
 box-shadow: var(--shadow-xs);
}

.sidebar-widget h4 {
 font-family: var(--font-display);
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--text-main);
 margin-bottom: 0.8rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.sidebar-link {
 display: block;
 padding: 0.5rem 0.6rem;
 border-radius: var(--r-sm);
 color: var(--text-muted);
 font-size: 0.85rem;
 transition: all 0.15s ease;
 border-bottom: 1px solid var(--border);
}

.sidebar-link:last-child {
 border-bottom: none;
}

.sidebar-link:hover {
 background: var(--primary-light);
 color: var(--primary);
 padding-left: 0.8rem;
}

footer {
 background: #0F172A !important;
 color: #F8FAFC !important;
 padding: 4rem 1.5rem 2.5rem !important;
 border-top: 1px solid #1E293B !important;
 width: 100% !important;
 display: block !important;
}

.footer-inner {
 max-width: var(--max);
 margin: 0 auto;
 width: 100%;
}

.footer-top {
 display: grid;
 grid-template-columns: 2fr 1fr 1.2fr 1fr;
 gap: 3rem;
 margin-bottom: 3rem;
}

.footer-brand {
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
}

.footer-brand .footer-logo {
 font-family: var(--font-display);
 font-size: 1.35rem;
 font-weight: 800;
 color: #FFFFFF;
}

.footer-brand .footer-logo span {
 color: var(--primary);
}

.footer-tagline {
 color: #94A3B8;
 font-size: 0.9rem;
 line-height: 1.65;
 max-width: 340px;
}

.footer-col h4 {
 font-family: var(--font-display);
 font-size: 0.85rem;
 font-weight: 700;
 color: #FFFFFF;
 margin-bottom: 1.1rem;
 text-transform: uppercase;
 letter-spacing: 0.8px;
}

.footer-col ul {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 0.65rem;
 padding: 0;
 margin: 0;
}

.footer-col a {
 color: #94A3B8;
 font-size: 0.88rem;
 font-weight: 500;
 transition: all 0.15s ease;
 display: inline-block;
}

.footer-col a:hover {
 color: #FFFFFF;
 transform: translateX(3px);
}

.footer-bottom {
 padding-top: 2rem;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 1rem;
 font-size: 0.82rem;
 color: #64748B;
}

@media (max-width: 900px) {
 .nav-links { display: none; }
 .hamburger { display: flex; }
 
 .font-grid {
 grid-template-columns: 1fr;
 }

 .footer-top {
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
 }
}

@media (max-width: 640px) {
 .hero {
 padding: 3rem 1rem 2.5rem;
 }

 .hero h1 {
 font-size: 2rem;
 }

 .studio-toolbar {
 flex-direction: column;
 align-items: stretch;
 }

 .toolbar-group {
 justify-content: space-between;
 }

 .search-filter-box {
 width: 100%;
 }

 .gen-input-footer {
 flex-direction: column;
 align-items: flex-start;
 }

 .footer-top {
 grid-template-columns: 1fr;
 gap: 2rem;
 }

 .footer-bottom {
 flex-direction: column;
 align-items: flex-start;
 gap: 0.5rem;
 }
}