/*
Theme Name: Technc
Theme URI: https://example.com/technc
Author: Technc
Author URI: https://example.com
Description: A clean, responsive WordPress theme for a tech company doing reviews, dropshipping, and tech content.
Version: 1.0.0
Text Domain: technc
*/

/* Base resets */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
:root {
  --color-bg: #ffffff;
  --color-card: #ffffff;
  --color-text: #111827;
  --color-subtle: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #2563eb;
  --color-accent-2: #06b6d4;
  --radius: 12px;
  --shadow: 0 10px 24px rgba(0,0,0,0.08);
  --container: 1200px;
}
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.65; }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
header.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(10px); background: rgba(255,255,255,0.85); border-bottom: 1px solid var(--color-border); }
header.site-header .brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
header.site-header .logo { font-weight: 700; letter-spacing: 0.2px; color: var(--color-text); }
header.site-header .logo img { height: 106px; width: auto; }
header.site-header nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
header.site-header a { text-decoration: none; color: var(--color-text); opacity: 0.9; }
header.site-header a:hover { color: var(--color-accent); opacity: 1; }
.primary-nav { display: block; }

main { display: block; }
footer.site-footer { border-top: 1px solid var(--color-border); margin-top: 64px; padding: 28px 0; color: var(--color-subtle); background: #f8fafc; }

/* Components */
.btn { display: inline-block; padding: 12px 18px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: #fff; border-radius: 10px; text-decoration: none; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(6,182,212,0.35); }

.hero { padding: 96px 0; background: radial-gradient(900px 540px at 0% 0%, rgba(37,99,235,0.10), transparent), radial-gradient(800px 500px at 100% 0%, rgba(6,182,212,0.08), transparent), #f8fafc; }
.hero .eyebrow { display:inline-block; font-weight:600; color: var(--color-accent-2); background: rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.25); padding: 6px 10px; border-radius: 999px; margin-bottom: 14px; }
.hero h1 { margin: 0 0 12px; font-size: 52px; line-height: 1.1; letter-spacing: -0.6px; }
.hero p { margin: 0 0 20px; color: var(--color-subtle); font-size: 18px; }
.hero .actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn-outline { display:inline-block; padding: 12px 18px; border:1px solid var(--color-border); border-radius:10px; color: var(--color-text); text-decoration:none; background:#fff; }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.col-12 { grid-column: span 12; }
@media (min-width: 768px) {
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 4; }
}

.card { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-card); box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,0.10); }
.card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card .card-body { padding: 18px; }
.card h3, .card h2 { margin: 0 0 8px; color: var(--color-text); }
.meta { font-size: 12px; color: var(--color-subtle); }

/* Content width */
.content { max-width: 780px; margin: 0 auto; }

/* Sections */
.section { padding: 56px 0; }
.features { background: #fff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.feature { padding: 8px 0; }
.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--color-subtle); }
.cta { background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(6,182,212,0.08)); border: 1px solid var(--color-border); border-radius: 14px; padding: 24px; }