/*
Theme Name: دیجیتک - خدمات دیجیتال
Theme URI: https://example.com
Author: Digitak
Author URI: https://example.com
Description: پوسته وردپرس تک‌صفحه‌ای برای کسب‌وکارهای ارائه‌دهنده خدمات دیجیتال (طراحی سایت، اپلیکیشن، سئو). شامل بخش‌های خدمات، نمونه‌کار، نظرات مشتریان، سوالات متداول و فرم تماس.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: digitak
Tags: one-column, custom-menu, custom-colors, rtl-language-support, theme-options, translation-ready
*/

/* -------------------------------------------------
   0. Variables & Reset
------------------------------------------------- */
:root{
  --gray-950:#030712;
  --gray-900:#111827;
  --gray-800:#1f2937;
  --gray-800-60:rgba(31,41,55,.6);
  --gray-800-50:rgba(31,41,55,.5);
  --gray-700:#374151;
  --gray-700-50:rgba(55,65,81,.5);
  --gray-600:#4b5563;
  --gray-500:#6b7280;
  --gray-400:#9ca3af;
  --gray-300:#d1d5db;
  --gray-200:#e5e7eb;
  --gray-100:#f3f4f6;

  --purple-300:#d8b4fe;
  --purple-400:#c084fc;
  --purple-500:#a855f7;
  --purple-600:#9333ea;
  --purple-900-40:rgba(88,28,135,.4);

  --blue-400:#60a5fa;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --blue-900-40:rgba(30,58,138,.4);

  --pink-400:#f472b6;
  --pink-500:#ec4899;
  --cyan-400:#22d3ee;
  --cyan-500:#06b6d4;
  --green-400:#4ade80;
  --green-500:#22c55e;
  --teal-500:#14b8a6;
  --yellow-400:#facc15;
  --yellow-500:#eab308;
  --orange-500:#f97316;
  --violet-500:#8b5cf6;
  --rose-500:#f43f5e;
  --indigo-500:#6366f1;
  --amber-500:#f59e0b;

  --radius-sm:.75rem;
  --radius-md:1rem;
  --radius-lg:1.25rem;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--gray-950);
  color:var(--gray-100);
  font-family:'Vazirmatn', Tahoma, sans-serif;
  -webkit-font-smoothing:antialiased;
  direction:rtl;
}
section{ scroll-margin-top:80px; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:1280px; margin:0 auto; padding:0 1.25rem; }
.screen-reader-text{ position:absolute; left:-9999px; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:var(--gray-900); }
::-webkit-scrollbar-thumb{ background:var(--gray-700); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--purple-600); }

.bg-clip-gradient{
  background-image:linear-gradient(90deg, var(--purple-400), var(--pink-400), var(--blue-400));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-block;
  padding:.4rem 1rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:500;
  margin-bottom:1rem;
  border:1px solid;
}

.section-head{ text-align:center; margin-bottom:3.5rem; }
.section-head h2{ font-size:clamp(1.9rem,4vw,3rem); font-weight:800; color:#fff; margin:0 0 1rem; }
.section-head p{ color:var(--gray-400); font-size:1.1rem; max-width:640px; margin:0 auto; line-height:1.9; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 2rem; border-radius:1rem; font-weight:700; font-size:1.05rem;
  border:none; transition:.25s;
}
.btn-primary{
  background-image:linear-gradient(90deg, var(--purple-600), var(--blue-600));
  color:#fff;
  box-shadow:0 10px 30px -8px rgba(168,85,247,.45);
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px -6px rgba(168,85,247,.6); }
.btn-outline{
  color:var(--gray-300); border:1px solid var(--gray-700); background:transparent;
}
.btn-outline:hover{ color:#fff; border-color:var(--gray-500); background:rgba(255,255,255,.05); }

/* -------------------------------------------------
   1. Navbar
------------------------------------------------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:50;
  transition:.3s;
  background:transparent;
}
.site-header.scrolled{
  background:rgba(17,24,39,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -10px rgba(88,28,135,.2);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  width:38px; height:38px; border-radius:12px;
  background-image:linear-gradient(135deg,var(--purple-500),var(--blue-500));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.1rem;
  box-shadow:0 8px 20px -6px rgba(168,85,247,.5);
}
.brand-name{ color:#fff; font-weight:700; font-size:1.25rem; }

.nav-links{ display:flex; align-items:center; gap:.25rem; }
.nav-links a{
  color:var(--gray-300); padding:.55rem 1rem; border-radius:.7rem; font-size:.92rem; font-weight:500; transition:.2s;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-cta{ display:none; }
.menu-toggle{
  display:flex; background:none; border:0; color:var(--gray-300); padding:.5rem;
}
.menu-toggle span{ display:block; width:22px; height:2px; background:currentColor; margin:5px 0; transition:.2s; }

.mobile-menu{ max-height:0; overflow:hidden; background:rgba(17,24,39,.98); transition:.3s; }
.mobile-menu.open{ max-height:500px; }
.mobile-menu ul{ padding:0 1.25rem 1.25rem; }
.mobile-menu li{ margin-top:.25rem; }
.mobile-menu a{ display:block; padding:.85rem 1rem; border-radius:.7rem; color:var(--gray-300); font-weight:500; }
.mobile-menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.mobile-menu .mobile-cta{ display:block; text-align:center; margin-top:.5rem; padding:.9rem; border-radius:1rem; font-weight:700; color:#fff;
  background-image:linear-gradient(90deg,var(--purple-600),var(--blue-600)); }

@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:block; }
  .menu-toggle, .mobile-menu{ display:none; }
}
@media (max-width:899px){
  .nav-links{ display:none; }
}

/* -------------------------------------------------
   2. Hero
------------------------------------------------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--gray-950); text-align:center; padding:7rem 1rem 4rem;
}
.hero-bg{
  position:absolute; inset:0; opacity:.3; background-size:cover; background-position:center;
}
.hero canvas{ position:absolute; inset:0; z-index:0; }
.hero-gradient{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(135deg, var(--purple-900-40), transparent, var(--blue-900-40));
}
.hero-fade-bottom{
  position:absolute; inset-inline:0; bottom:0; height:8rem; z-index:0;
  background-image:linear-gradient(to top, var(--gray-950), transparent);
}
.glow-orb{ position:absolute; border-radius:999px; filter:blur(70px); z-index:0; }
.glow-orb.one{ top:22%; right:22%; width:260px; height:260px; background:rgba(147,51,234,.2); }
.glow-orb.two{ bottom:28%; left:22%; width:340px; height:340px; background:rgba(37,99,235,.15); }

.hero-content{ position:relative; z-index:10; max-width:820px; margin:0 auto; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.3); color:var(--purple-300);
  padding:.5rem 1rem; border-radius:999px; font-size:.9rem; font-weight:500; margin-bottom:2rem;
}
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-400); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

.hero h1{ color:#fff; font-weight:800; font-size:clamp(2.3rem,6vw,4.4rem); line-height:1.2; margin:0 0 1.5rem; }
.hero p.lead{ color:var(--gray-400); font-size:clamp(1.05rem,2vw,1.3rem); max-width:640px; margin:0 auto 2.5rem; line-height:1.9; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:4rem; }

.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:520px; margin:0 auto; }
.hero-stats .stat-value{ color:#fff; font-weight:800; font-size:clamp(1.4rem,3vw,1.9rem); }
.hero-stats .stat-label{ color:var(--gray-500); font-size:.9rem; margin-top:.25rem; }

.scroll-indicator{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:10; animation:bounce 2s infinite;
}
.scroll-indicator .pill{ width:24px; height:40px; border:2px solid var(--gray-600); border-radius:999px; display:flex; justify-content:center; padding-top:6px; }
.scroll-indicator .dot{ width:4px; height:10px; background:var(--gray-400); border-radius:999px; }
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,-8px);} }

/* -------------------------------------------------
   3. Cards / Grid generic
------------------------------------------------- */
.grid{ display:grid; gap:1.5rem; }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.card{
  background:var(--gray-900); border:1px solid var(--gray-800); border-radius:var(--radius-lg);
  padding:1.5rem; transition:.3s;
}
.card:hover{ border-color:rgba(168,85,247,.5); transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(168,85,247,.15); }

.icon-badge{
  width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:1.25rem; box-shadow:0 10px 20px -8px rgba(0,0,0,.4);
}
.icon-badge svg{ width:28px; height:28px; }

/* -------------------------------------------------
   4. Services
------------------------------------------------- */
.services{ padding:6rem 0; background:var(--gray-950); }
.service-card h3{ color:#fff; font-weight:700; font-size:1.25rem; margin:0 0 .5rem; }
.service-price{ display:inline-block; font-weight:600; font-size:.9rem; margin-bottom:.75rem; -webkit-background-clip:text; background-clip:text; color:transparent; }
.service-desc{ color:var(--gray-400); font-size:.92rem; line-height:1.9; margin-bottom:1.25rem; }
.service-features{ margin-bottom:1.5rem; }
.service-features li{ display:flex; align-items:center; gap:.5rem; color:var(--gray-300); font-size:.9rem; padding:.25rem 0; }
.feature-check{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feature-check svg{ width:11px; height:11px; color:#fff; }
.service-cta{ display:block; text-align:center; padding:.8rem; border-radius:.85rem; color:#fff; font-weight:700; font-size:.9rem; }

/* -------------------------------------------------
   5. Why us
------------------------------------------------- */
.why-us{ padding:6rem 0; background:var(--gray-900); }
.reason-card{ background:var(--gray-800-50); border:1px solid var(--gray-700-50); border-radius:var(--radius-lg); padding:1.5rem; transition:.3s; }
.reason-card:hover{ border-color:var(--gray-600); background:var(--gray-800); }
.reason-card h3{ color:#fff; font-weight:700; font-size:1.1rem; margin:0 0 .5rem; }
.reason-card p{ color:var(--gray-400); font-size:.9rem; line-height:1.8; margin:0; }
.reason-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.reason-tags a{
  font-size:.78rem; font-weight:500; color:var(--purple-400);
  background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.2);
  padding:.25rem .65rem; border-radius:999px; transition:.2s;
}
.reason-tags a:hover{ background:rgba(168,85,247,.2); color:var(--purple-300); }

/* -------------------------------------------------
   6. Portfolio
------------------------------------------------- */
.portfolio{ padding:6rem 0; background:var(--gray-950); }
.portfolio-card{ background:var(--gray-900); border:1px solid var(--gray-800); border-radius:var(--radius-lg); overflow:hidden; transition:.3s; }
.portfolio-card:hover{ border-color:var(--gray-600); transform:translateY(-4px); }
.portfolio-thumb{ height:160px; display:flex; align-items:center; justify-content:center; position:relative; font-size:4rem; }
.portfolio-tag{ position:absolute; top:.75rem; left:.75rem; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); color:#fff; font-size:.75rem; padding:.3rem .65rem; border-radius:999px; font-weight:500; }
.portfolio-body{ padding:1.25rem; }
.portfolio-cat{ color:var(--purple-400); font-size:.75rem; font-weight:500; margin-bottom:.4rem; }
.portfolio-body h3{ color:#fff; font-weight:700; font-size:1.1rem; margin:0 0 .5rem; }
.portfolio-body p{ color:var(--gray-400); font-size:.9rem; line-height:1.8; margin:0; }
.portfolio-more{ text-align:center; margin-top:2.5rem; }
.portfolio-more a{ display:inline-flex; align-items:center; gap:.5rem; color:var(--purple-400); font-weight:700; }
.portfolio-more a:hover{ color:var(--purple-300); }

/* -------------------------------------------------
   7. Testimonials
------------------------------------------------- */
.testimonials{ padding:6rem 0; background:var(--gray-900); }
.testi-card{ background:var(--gray-800-60); border:1px solid var(--gray-700-50); border-radius:var(--radius-lg); padding:1.5rem; display:flex; flex-direction:column; }
.testi-quote{ color:var(--purple-400); font-size:2.5rem; font-family:Georgia,serif; line-height:1; margin-bottom:.5rem; }
.testi-content{ color:var(--gray-300); font-size:.9rem; line-height:1.9; margin-bottom:1.25rem; flex:1; }
.testi-footer{ display:flex; align-items:center; gap:.75rem; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background-image:linear-gradient(135deg,var(--purple-500),var(--blue-500));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem;
}
.testi-name{ color:#fff; font-weight:600; font-size:.9rem; }
.testi-role{ color:var(--gray-500); font-size:.75rem; }
.stars{ display:flex; gap:2px; margin-top:.2rem; }
.stars svg{ width:14px; height:14px; }
.star-on{ color:var(--yellow-400); }
.star-off{ color:var(--gray-600); }

/* -------------------------------------------------
   8. FAQ
------------------------------------------------- */
.faq{ padding:6rem 0; background:var(--gray-950); }
.faq-wrap{ max-width:820px; margin:0 auto; }
.faq-item{ border:1px solid var(--gray-800); background:rgba(17,24,39,.5); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:.75rem; transition:.25s; }
.faq-item.open{ border-color:rgba(168,85,247,.5); background:var(--gray-900); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:0; padding:1.25rem 1.5rem; text-align:right; color:var(--gray-200); font-weight:600; font-size:1rem;
}
.faq-item.open .faq-question{ color:var(--purple-400); }
.faq-icon{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--gray-800); color:var(--gray-400); transition:.3s;
}
.faq-item.open .faq-icon{ background:var(--purple-500); color:#fff; transform:rotate(45deg); }
.faq-icon svg{ width:16px; height:16px; }
.faq-answer{ max-height:0; overflow:hidden; transition:.3s; }
.faq-item.open .faq-answer{ max-height:400px; }
.faq-answer p{ padding:0 1.5rem 1.5rem; color:var(--gray-400); font-size:.92rem; line-height:1.9; margin:0; }

/* -------------------------------------------------
   9. Contact
------------------------------------------------- */
.contact{ padding:6rem 0; background:var(--gray-900); }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:2fr 3fr; } }

.contact-info-card, .contact-form-card{ background:var(--gray-800-50); border:1px solid var(--gray-700-50); border-radius:var(--radius-lg); padding:1.5rem; }
.contact-info-card h3, .contact-form-card h3{ color:#fff; font-weight:700; font-size:1.1rem; margin:0 0 1.25rem; }
.contact-info-card{ margin-bottom:1.5rem; }
.info-row{ display:flex; align-items:center; gap:1rem; color:var(--gray-300); padding:.6rem 0; }
.info-icon{ width:40px; height:40px; border-radius:.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-icon svg{ width:20px; height:20px; }
.info-label{ font-size:.75rem; color:var(--gray-500); margin-bottom:.15rem; }
.info-value{ font-weight:600; }

.social-row{ display:flex; gap:.75rem; }
.social-btn{ width:44px; height:44px; border-radius:.85rem; display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s; }
.social-btn:hover{ transform:scale(1.1); }
.social-btn svg{ width:20px; height:20px; }
.social-instagram{ background-image:linear-gradient(135deg,#ec4899,var(--orange-500)); }
.social-telegram{ background:#229ED9; }
.social-whatsapp{ background:#25D366; }

.form-row{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:1.25rem; }
@media (min-width:640px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.form-group label{ display:block; color:var(--gray-400); font-size:.9rem; margin-bottom:.5rem; }
.form-group label .req{ color:#f87171; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:var(--gray-900); border:1px solid var(--gray-700); color:#fff; border-radius:.85rem;
  padding:.8rem 1rem; font-size:.9rem; font-family:inherit; transition:.2s;
}
.form-group input::placeholder, .form-group textarea::placeholder{ color:var(--gray-600); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--purple-500); }
.form-group textarea{ resize:none; }

.form-submit{
  width:100%; background-image:linear-gradient(90deg,var(--purple-600),var(--blue-600)); color:#fff; border:0;
  padding:1rem; border-radius:.85rem; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:0 12px 24px -10px rgba(168,85,247,.4); transition:.2s;
}
.form-submit:hover{ transform:scale(1.02); }
.form-submit:disabled{ opacity:.5; cursor:not-allowed; }

.form-error{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#f87171; border-radius:.85rem; padding:.8rem 1rem; font-size:.9rem; margin-bottom:1.25rem; }
.form-success{ text-align:center; padding:3rem 0; }
.form-success .icon{ width:64px; height:64px; border-radius:50%; background:rgba(34,197,94,.2); border:1px solid rgba(34,197,94,.3); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.form-success .icon svg{ width:32px; height:32px; color:var(--green-400); }
.form-success h3{ color:#fff; font-weight:700; font-size:1.25rem; margin:0 0 .5rem; }
.form-success p{ color:var(--gray-400); margin:0 0 1.5rem; }
.form-success button{ background:none; border:0; color:var(--purple-400); font-weight:700; }

.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* -------------------------------------------------
   10. Footer
------------------------------------------------- */
.site-footer{ background:var(--gray-950); border-top:1px solid var(--gray-800); padding:3.5rem 0 1.75rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-bottom:2.5rem; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:repeat(3,1fr); } }
.footer-desc{ color:var(--gray-500); font-size:.9rem; line-height:1.9; margin-top:1rem; }
.footer-col h4{ color:#fff; font-weight:600; margin:0 0 1rem; }
.footer-col ul li{ margin-bottom:.5rem; }
.footer-col ul a{ color:var(--gray-500); font-size:.9rem; }
.footer-col ul a:hover{ color:var(--gray-300); }
.footer-contact-link{ display:flex; align-items:center; gap:.5rem; color:var(--gray-500); font-size:.9rem; margin-bottom:.75rem; }
.footer-contact-link:hover{ color:var(--gray-300); }
.footer-contact-link svg{ width:16px; height:16px; }
.footer-social{ display:flex; gap:.75rem; padding-top:.5rem; }
.footer-social a{ width:36px; height:36px; border-radius:.65rem; background:var(--gray-800); display:flex; align-items:center; justify-content:center; color:var(--gray-400); }
.footer-social a:hover{ background:var(--gray-700); color:#fff; }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid var(--gray-800); padding-top:1.5rem; display:flex; flex-direction:column; align-items:center; gap:.75rem; text-align:center; }
@media (min-width:640px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }
.footer-bottom p{ margin:0; color:var(--gray-600); font-size:.9rem; }
.footer-bottom .credit{ color:#374151; font-size:.75rem; }

/* Gradient utility classes reused across sections */
.grad-purple-blue{ background-image:linear-gradient(135deg,var(--purple-500),var(--blue-500)); }
.grad-blue-cyan{ background-image:linear-gradient(135deg,var(--blue-500),var(--cyan-500)); }
.grad-green-teal{ background-image:linear-gradient(135deg,var(--green-500),var(--teal-500)); }
.grad-pink-rose{ background-image:linear-gradient(135deg,var(--pink-500),var(--rose-500)); }
.grad-orange-yellow{ background-image:linear-gradient(135deg,var(--orange-500),var(--yellow-500)); }
.grad-violet-purple{ background-image:linear-gradient(135deg,var(--violet-500),var(--purple-500)); }
.grad-purple-violet{ background-image:linear-gradient(135deg,var(--purple-500),var(--violet-500)); }
.grad-blue-cyan2{ background-image:linear-gradient(135deg,var(--blue-500),var(--cyan-500)); }
.grad-green-teal2{ background-image:linear-gradient(135deg,var(--green-500),var(--teal-500)); }
.grad-orange-amber{ background-image:linear-gradient(135deg,var(--orange-500),var(--amber-500)); }
.grad-pink-rose2{ background-image:linear-gradient(135deg,var(--pink-500),var(--rose-500)); }
.grad-indigo-blue{ background-image:linear-gradient(135deg,var(--indigo-500),var(--blue-500)); }

.eyebrow-purple{ background:rgba(168,85,247,.1); color:var(--purple-400); border-color:rgba(168,85,247,.2); }
.eyebrow-blue{ background:rgba(59,130,246,.1); color:var(--blue-400); border-color:rgba(59,130,246,.2); }
.eyebrow-green{ background:rgba(34,197,94,.1); color:var(--green-400); border-color:rgba(34,197,94,.2); }
.eyebrow-yellow{ background:rgba(234,179,8,.1); color:var(--yellow-400); border-color:rgba(234,179,8,.2); }
.eyebrow-cyan{ background:rgba(6,182,212,.1); color:var(--cyan-400); border-color:rgba(6,182,212,.2); }