:root {
  --primary: #000000;
  --secondary: #1a1a1a;
  --accent: #FF5A00;
  --accent-light: rgba(255, 90, 0, 0.1);
  --bg: #FFFFFF;
  --bg-light: #F8F9FA;
  --text: #333333;
  --text-muted: #666666;
  --border: #E5E7EB;
  --font-main: 'Poppins', sans-serif;
  --radius: 12px;
  --transition: 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-main); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }

h1, h2, h3, h4 { font-weight: 700; color: var(--primary); line-height: 1.2; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.text-accent { color: var(--accent); }
.bg-light { background-color: var(--bg-light); }
.dot { color: var(--accent); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.8rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: all var(--transition); border: none; font-size: 1rem; }
.btn-primary { background: var(--accent); color: white; box-shadow: 0 4px 15px rgba(255, 90, 0, 0.3); }
.btn-primary:hover { background: #e04d00; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 90, 0, 0.4); color: white; }
.btn-outline { background: transparent; color: white; border: 2px solid white; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }

/* Navbar */
.navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1.5rem 0; transition: all var(--transition); background: transparent; }
.navbar.scrolled { padding: 1rem 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 800; color: white; letter-spacing: -0.5px; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: #ccc; font-weight: 500; font-size: 0.95rem; }
.nav-links a:hover { color: white; }

/* Reveal Animation Setup */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* 1. Hero Section */
.hero { background-color: var(--primary); min-height: 100vh; display: flex; align-items: center; position: relative; padding-top: 5rem; overflow: hidden; }
.tech-bg { background-image: radial-gradient(rgba(255, 90, 0, 0.15) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 30px 30px, 100px 100px; }
.hero-content { text-align: center; max-width: 800px; margin: 0 auto; z-index: 2; position: relative; }
.hero h1 { font-size: 4.5rem; color: white; letter-spacing: -1px; margin-bottom: 1.5rem; }
.hero .subtitle { font-size: 1.25rem; color: #aaaaaa; margin-bottom: 2.5rem; font-weight: 400; }
.hero-btns { display: flex; justify-content: center; gap: 1rem; }

/* Global Sections */
section { padding: 6rem 0; }
.section-title { text-align: center; margin-bottom: 4rem; }
.section-title h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.section-title h2 span { color: var(--accent); }
.section-title p { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* 2. Featured Kit Section */
.featured-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.kit-box { background: var(--bg-light); border: 1px solid var(--border); border-radius: 24px; padding: 4rem 2rem; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
.kit-box::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: var(--accent-light); border-radius: 50%; filter: blur(40px); }
.esp-board { font-size: 5rem; color: var(--primary); margin-bottom: 1rem; position: relative; z-index: 2; }
.kit-box h3 { font-size: 1.5rem; position: relative; z-index: 2; }
.kit-box p { color: var(--text-muted); position: relative; z-index: 2; }
.product-info .tag { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 0.4rem 1rem; border-radius: 50px; font-weight: 600; font-size: 0.85rem; margin-bottom: 1rem; }
.product-info h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.product-info .desc { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; }
.feature-list { margin-bottom: 2.5rem; }
.feature-list li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-weight: 500; color: var(--text); }
.feature-list li i { color: var(--accent); font-size: 1.25rem; }

/* 3. Projects Grid */
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.project-card { background: white; padding: 2.5rem; border-radius: var(--radius); border: 1px solid var(--border); transition: all var(--transition); text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--accent-light); }
.project-card .icon-box { width: 60px; height: 60px; background: var(--accent-light); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 1.5rem; }
.project-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.project-card p { color: var(--text-muted); font-size: 0.95rem; }

/* 4. Features Section */
.features-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.features-text h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.features-text > p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 3rem; }
.why-list li { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.why-list li i { font-size: 2rem; color: var(--accent); background: var(--accent-light); width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-list li h4 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.why-list li p { color: var(--text-muted); font-size: 0.95rem; }
.features-image { background: var(--primary); border-radius: 24px; height: 500px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.features-image .abstract-visual { position: relative; z-index: 2; font-size: 5rem; color: white; }
.circle { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(255, 90, 0, 0.3); }
.circle.c1 { width: 200px; height: 200px; animation: spin 20s linear infinite; }
.circle.c2 { width: 350px; height: 350px; border: 1px dashed rgba(255, 255, 255, 0.1); animation: spin 30s linear infinite reverse; }
@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* 5. How It Works */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; }
.step-card { background: white; border-radius: var(--radius); padding: 3rem 2rem; text-align: center; position: relative; border: 1px solid var(--border); z-index: 2; transition: all var(--transition); overflow: hidden; }
.step-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.step-num { position: absolute; top: 0px; right: 10px; font-size: 6rem; font-weight: 800; color: var(--bg-light); line-height: 1; z-index: -1; transition: color 0.3s ease; }
.step-card:hover .step-num { color: var(--accent-light); }
.step-card i { font-size: 3rem; margin-bottom: 1.5rem; color: var(--accent); }
.step-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.step-card p { color: var(--text-muted); }

/* 6. Demo Video Section */
.demo-wrapper { text-align: center; max-width: 800px; margin: 0 auto; color: white; }
.demo-wrapper h2 { color: white; font-size: 2rem; margin-bottom: 3rem; }
.video-placeholder { background: rgba(255, 255, 255, 0.05); border: 2px dashed rgba(255, 90, 0, 0.3); border-radius: 24px; padding: 5rem 2rem; margin-bottom: 2.5rem; cursor: pointer; transition: all var(--transition); }
.video-placeholder:hover { background: rgba(255, 90, 0, 0.1); border-color: var(--accent); }
.video-placeholder i { font-size: 4rem; color: var(--accent); margin-bottom: 1rem; }
.video-placeholder p { font-size: 1.25rem; font-weight: 500; }

/* 7. Target Users */
.user-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.user-card { background: white; padding: 2.5rem 1.5rem; border-radius: var(--radius); text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: all var(--transition); border-top: 4px solid transparent; }
.user-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-top-color: var(--accent); }
.user-card i { font-size: 2.5rem; color: var(--secondary); margin-bottom: 1.5rem; transition: color var(--transition); }
.user-card:hover i { color: var(--accent); }
.user-card h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.user-card p { font-size: 0.9rem; color: var(--text-muted); }

/* 8. Testimonials */
.testimo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.testimo-card { background: var(--bg-light); padding: 2.5rem; border-radius: var(--radius); position: relative; }
.testimo-card > i { font-size: 2rem; color: var(--accent-light); position: absolute; top: 1.5rem; left: 1.5rem; }
.testimo-card p { font-size: 1.05rem; font-weight: 500; color: var(--text); margin-bottom: 2rem; position: relative; z-index: 2; padding-top: 1rem; font-style: italic; }
.author { display: flex; align-items: center; gap: 1rem; }
.author i { font-size: 2.5rem; color: #ccc; }
.author span { font-weight: 600; font-size: 0.95rem; }

/* 9. Footer */
.footer { background: var(--primary); color: white; padding-top: 6rem; padding-bottom: 2rem; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 3rem; margin-bottom: 4rem; }
.footer-brand h2 { color: white; font-size: 2rem; margin-bottom: 1rem; }
.footer-brand p { color: #aaaaaa; margin-bottom: 2rem; max-width: 300px; }
.socials { display: flex; gap: 1rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.socials a:hover { background: var(--accent); transform: translateY(-3px); }
.footer-links h3, .footer-newsletter h3 { color: white; font-size: 1.25rem; margin-bottom: 1.5rem; }
.footer-links ul li { margin-bottom: 0.75rem; }
.footer-links ul li a { color: #aaaaaa; font-weight: 500; }
.footer-links ul li a:hover { color: var(--accent); padding-left: 5px; }
.footer-newsletter p { color: #aaaaaa; margin-bottom: 1.5rem; }
.newsletter-form { display: flex; gap: 0.5rem; }
.newsletter-form input { flex: 1; padding: 0.8rem 1rem; border-radius: var(--radius); border: none; outline: none; font-family: var(--font-main); }
.newsletter-form button { padding: 0.8rem 1.5rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); color: #888888; font-size: 0.9rem; }
.made-in { display: flex; align-items: center; gap: 0.5rem; }

/* Responsive tweaks */
@media (max-width: 992px) {
  .hero h1 { font-size: 3.5rem; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .features-container, .featured-container { grid-template-columns: 1fr; }
  .features-image { height: 400px; order: -1; } /* move image up on mobile */
  .user-grid { grid-template-columns: repeat(2, 1fr); }
  .testimo-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2.8rem; }
  .nav-links, .sm-hide { display: none; } 
  .grid-6, .user-grid, .footer-top { grid-template-columns: 1fr; }
  .hero-btns { flex-direction: column; }
}

/* ── LOGO HEX MARK ────────────────────── */
.logo { display:flex; align-items:center; gap:10px; font-size:1.5rem; font-weight:800; color:white; letter-spacing:-0.5px; text-decoration:none; }
.logo-hex { width:36px; height:36px; flex-shrink:0; }
.logo-wordmark .e { color:#ffffff; }
.logo-wordmark .r { color:#FF5A00; }
.logo-wordmark .dot { color:#FF5A00; }

/* ── PAGE HERO (inner pages) ────────────── */
.page-hero { background:var(--primary); padding:8rem 0 5rem; text-align:center; }
.page-hero h1 { font-size:3rem; color:white; margin-bottom:1rem; }
.page-hero h1 span { color:var(--accent); }
.page-hero p { color:#aaa; font-size:1.1rem; max-width:560px; margin:0 auto; }
.breadcrumb { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-bottom:1rem; font-size:0.85rem; color:#666; }
.breadcrumb a { color:#aaa; } .breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { color:var(--accent); }

/* ── ACTIVE NAV LINK ────────────────────── */
.nav-links a.active { color:var(--accent); }

/* ── ABOUT PAGE ─────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-text h2 { font-size:2.5rem; margin-bottom:1rem; }
.about-text h2 span { color:var(--accent); }
.about-text p { color:var(--text-muted); font-size:1.05rem; line-height:1.8; margin-bottom:1.5rem; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
.stat-box { background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; }
.stat-box .num { font-size:2.5rem; font-weight:800; color:var(--accent); line-height:1; }
.stat-box .lbl { font-size:0.85rem; color:var(--text-muted); margin-top:4px; }
.about-img-box { background:var(--primary); border-radius:24px; height:480px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.1); }
.about-img-box .circle { position:absolute; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); border:1px dashed rgba(255,90,0,0.3); }
.about-img-box .c1 { width:200px; height:200px; animation:spin 20s linear infinite; }
.about-img-box .c2 { width:350px; height:350px; border:1px dashed rgba(255,255,255,0.1); animation:spin 30s linear infinite reverse; }
.about-img-box i { font-size:5rem; color:var(--accent); position:relative; z-index:2; }

/* ── VALUES SECTION ─────────────────────── */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.value-card { background:white; border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem 2rem; text-align:center; transition:all var(--transition); }
.value-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,0.06); border-color:var(--accent-light); }
.value-card i { font-size:2.5rem; color:var(--accent); margin-bottom:1rem; }
.value-card h3 { margin-bottom:0.75rem; }
.value-card p { color:var(--text-muted); font-size:0.95rem; }

/* ── CONTACT PAGE ───────────────────────── */
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.contact-info h2 { font-size:2rem; margin-bottom:1rem; }
.contact-info h2 span { color:var(--accent); }
.contact-info p { color:var(--text-muted); margin-bottom:2rem; }
.contact-channels { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.contact-channel { display:flex; align-items:center; gap:1rem; padding:1.2rem 1.5rem; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius); transition:all var(--transition); text-decoration:none; }
.contact-channel:hover { border-color:var(--accent); transform:translateX(4px); }
.contact-channel i { font-size:1.5rem; color:var(--accent); flex-shrink:0; }
.contact-channel .ch-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.contact-channel .ch-val { font-weight:700; color:var(--text); font-size:0.95rem; }
.contact-form-box { background:white; border:1px solid var(--border); border-radius:24px; padding:3rem; box-shadow:0 10px 30px rgba(0,0,0,0.04); }
.contact-form-box h3 { font-size:1.5rem; margin-bottom:0.5rem; }
.contact-form-box .sub { color:var(--text-muted); margin-bottom:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.85rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; text-transform:uppercase; letter-spacing:0.03em; }
.form-group label span { color:var(--accent); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:0.85rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-main); font-size:0.95rem; color:var(--text); background:var(--bg); transition:border-color var(--transition); outline:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-submit { width:100%; padding:1rem; border-radius:var(--radius); background:var(--accent); color:white; font-family:var(--font-main); font-size:1rem; font-weight:700; border:none; cursor:pointer; transition:all var(--transition); }
.form-submit:hover { background:#e04d00; transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,90,0,0.3); }
.form-note { font-size:0.8rem; color:var(--text-muted); text-align:center; margin-top:0.75rem; }
.success-msg { display:none; text-align:center; padding:2rem; }
.success-msg i { font-size:3rem; color:var(--accent); margin-bottom:1rem; }
.success-msg h3 { margin-bottom:0.5rem; }
.success-msg p { color:var(--text-muted); }

/* ── SHOP / BUY PAGE ────────────────────── */
.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.shop-visual { position:sticky; top:6rem; }
.shop-kit-box { background:var(--bg-light); border:1px solid var(--border); border-radius:24px; padding:4rem 2rem; text-align:center; position:relative; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.05); }
.shop-kit-box::before { content:''; position:absolute; top:-50px; right:-50px; width:150px; height:150px; background:var(--accent-light); border-radius:50%; filter:blur(40px); }
.shop-kit-box i { font-size:6rem; color:var(--primary); position:relative; z-index:2; }
.shop-kit-box h3 { font-size:1.5rem; margin-top:1rem; position:relative; z-index:2; }
.shop-kit-box p { color:var(--text-muted); position:relative; z-index:2; }
.shop-badges { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1.5rem; justify-content:center; }
.shop-badge { padding:0.4rem 1rem; border-radius:50px; font-size:0.8rem; font-weight:700; }
.sb-or  { background:var(--accent-light); color:var(--accent); }
.sb-gr  { background:rgba(52,211,153,0.1); color:#059669; }
.sb-bl  { background:rgba(59,130,246,0.1); color:#1d4ed8; }

.shop-info {}
.shop-info .tag { display:inline-block; background:var(--accent-light); color:var(--accent); padding:0.4rem 1rem; border-radius:50px; font-weight:700; font-size:0.85rem; margin-bottom:1rem; }
.shop-info h2 { font-size:2.8rem; margin-bottom:0.5rem; line-height:1.1; }
.shop-info h2 span { color:var(--accent); }
.shop-info .tagline { color:var(--text-muted); font-size:1rem; margin-bottom:1.5rem; }
.shop-price { display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.5rem; }
.price-big { font-size:3.5rem; font-weight:800; color:var(--primary); line-height:1; }
.price-big sup { font-size:1.5rem; vertical-align:top; margin-top:10px; color:var(--accent); }
.price-incl { font-size:0.9rem; color:#059669; font-weight:600; margin-bottom:1.5rem; }
.buy-stack { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.5rem; }
.btn-amz { display:flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.9rem 1.8rem; border-radius:var(--radius); background:#FF9900; color:#111; font-family:var(--font-main); font-size:1rem; font-weight:800; border:none; cursor:pointer; transition:all var(--transition); text-decoration:none; }
.btn-amz:hover { background:#e88800; transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,153,0,0.3); }
.trust-row { display:flex; gap:1.2rem; flex-wrap:wrap; padding:1.2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.trust-item { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--text-muted); font-weight:500; }
.trust-item i { color:var(--accent); }
.spec-table { width:100%; border-collapse:collapse; margin-bottom:1.5rem; }
.spec-table tr { border-bottom:1px solid var(--border); }
.spec-table tr:last-child { border-bottom:none; }
.spec-table td { padding:10px 4px; font-size:0.9rem; }
.spec-table td:first-child { color:var(--text-muted); width:40%; }
.spec-table td:last-child { font-weight:700; font-family:monospace; font-size:0.85rem; }

/* ── CONTENTS TABLE ─────────────────────── */
.contents-section { background:var(--bg-light); }
.contents-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:3rem; }
.content-item { background:white; border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1rem; display:flex; align-items:center; gap:1rem; transition:all var(--transition); }
.content-item:hover { border-color:var(--accent-light); transform:translateX(3px); }
.ci-num { width:28px; height:28px; border-radius:6px; background:var(--accent); color:white; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; flex-shrink:0; }
.ci-name { font-size:0.9rem; font-weight:700; color:var(--text); }
.ci-qty  { font-size:0.8rem; color:var(--text-muted); margin-top:2px; }

/* ── MANUAL DOWNLOAD PAGE ──────────────── */
.manual-hero { background:var(--primary); }
.manual-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.manual-card { background:white; border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem 2rem; text-align:center; transition:all var(--transition); position:relative; overflow:hidden; }
.manual-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,0.08); }
.manual-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); }
.manual-card i { font-size:3rem; color:var(--accent); margin-bottom:1rem; }
.manual-card h3 { font-size:1.2rem; margin-bottom:0.75rem; }
.manual-card p { color:var(--text-muted); font-size:0.9rem; margin-bottom:1.5rem; }
.manual-card .file-info { display:inline-flex; align-items:center; gap:0.5rem; background:var(--bg-light); padding:0.4rem 1rem; border-radius:50px; font-size:0.8rem; color:var(--text-muted); margin-bottom:1.5rem; }
.lab-steps-list { text-align:left; margin:2rem 0; }
.lab-steps-list .step { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.lab-steps-list .step:last-child { border-bottom:none; }
.step-badge { width:32px; height:32px; border-radius:50%; background:var(--accent); color:white; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; flex-shrink:0; }
.step-text strong { display:block; font-size:0.95rem; margin-bottom:3px; }
.step-text span { font-size:0.85rem; color:var(--text-muted); }

/* ── PROJECTS PAGE ──────────────────────── */
.projects-intro { max-width:640px; margin:0 auto 3rem; text-align:center; }
.projects-intro p { color:var(--text-muted); font-size:1.05rem; }

/* ── RESPONSIVE ADDITIONS ───────────────── */
@media(max-width:992px) {
  .about-grid, .contact-layout, .shop-grid { grid-template-columns:1fr; }
  .shop-visual { position:static; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .manual-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .page-hero h1 { font-size:2.2rem; }
  .form-row { grid-template-columns:1fr; }
  .values-grid, .manual-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
}