/*
 * Draftstack · Copyright (c) 2026 Draftstack (draftstack.in). All rights reserved.
 * UI v10: calmer, more crafted look. Same navy + gold, fewer "template" effects:
 * no dot grid or coloured glow in the hero, no gradient text, no glass blur, no cards jumping on hover,
 * softer shadows, a warm off-white page, and the Figtree typeface instead of the default Inter.
 */
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree.woff") format("woff"); font-weight: 300 900; font-display: swap; }
:root {
  --sans: "Figtree", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --paper: #FBFAF7;
  --sh-2: 0 8px 22px -14px rgba(20,27,45,.22), 0 1px 3px rgba(20,27,45,.05);
  --sh-3: 0 18px 40px -26px rgba(20,27,45,.32);
}
body { background: var(--paper); }

/* Hero: one calm navy, no orbs, no dot grid, no glowing badge, solid gold accent */
.hero8 { background: linear-gradient(180deg, #19213B 0%, #1C2541 100%); }
.hero8::before { display: none; }
.hero8 h1 em { background: none; color: #E2B867; -webkit-text-fill-color: #E2B867; }
.h8-dot { background: #E2B867; box-shadow: none; }
.h8-search { box-shadow: 0 10px 24px -16px rgba(0,0,0,.45); }

/* Header and section tabs: solid, no frosted glass */
.site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.p-tabs { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Hover: a quiet border/colour change instead of cards lifting and arrows sliding */
.card:hover, .cat:hover, .need:hover, .tl-card:hover, .guide-card:hover, .ad-card:hover, .th-cat:hover, .thc:hover, .inside-card:hover, .th-lp:hover, .wa-float:hover { transform: none; }
.cat:hover .cat-icon, .cat:hover .cat-thumb, .hero-art:hover .a1, .hero-art:hover .a2, .hero-art:hover .a3 { transform: none; }
.link-arrow:hover .ic { transform: none; }
.card:hover { box-shadow: var(--sh-2); }

/* Sale banner: one solid colour */
.sale-bar { background: #8E2430; }

/* Free tools: a light placeholder while the live preview loads */
.skel { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: #fff; border-radius: 14px; min-height: 360px; }
.skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF0F4 25%, #F6F7F9 50%, #EEF0F4 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
.skel i:nth-child(1) { width: 45%; height: 22px; } .skel i:nth-child(2) { width: 70%; } .skel i:nth-child(3) { width: 90%; } .skel i:nth-child(4) { width: 80%; } .skel i:nth-child(5) { width: 60%; } .skel i:nth-child(6) { width: 85%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.is-loading { opacity: .65; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }