*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);font-family:'DM Sans',sans-serif;color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
    nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;display:flex;align-items:center;justify-content:center;background:rgba(9,9,11,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
    .nav-inner{width:100%;max-width:1280px;padding:0 56px;display:flex;align-items:center;justify-content:space-between}
    .nav-links{display:flex;gap:32px;list-style:none;align-items:center}
    .nav-links a{font-size:12px;font-weight:400;letter-spacing:0.08em;color:var(--muted);text-decoration:none;transition:color 0.2s}
    .nav-links a:hover{color:var(--white)}
    .nav-btn-fill{padding:8px 20px;background:var(--blue);color:white;font-size:12px;font-weight:500;letter-spacing:0.06em;border-radius:6px;text-decoration:none;transition:filter 0.2s,transform 0.2s;box-shadow:0 0 24px var(--blue-glow)}
    .nav-btn-fill:hover{filter:brightness(1.12);transform:translateY(-1px)}
    .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 24px 100px;position:relative;overflow:hidden}
    .hero-orb{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:700px;height:400px;border-radius:50%;background:radial-gradient(ellipse,rgba(79,126,255,0.10) 0%,transparent 70%);pointer-events:none;animation:orb 8s ease-in-out infinite alternate}
    @keyframes orb{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.15)}}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(79,126,255,0.12);border:1px solid rgba(79,126,255,0.25);border-radius:99px;padding:6px 16px;font-size:11px;font-weight:500;color:var(--blue-light);letter-spacing:0.08em;margin-bottom:28px;animation:fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both}
    .hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue);animation:pulse 2s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
    .hero-title{font-family:'Syne',sans-serif;font-size:clamp(44px,6vw,76px);font-weight:800;line-height:1.0;letter-spacing:-0.03em;color:var(--white);margin-bottom:10px;animation:fadeUp 0.7s 0.08s cubic-bezier(0.16,1,0.3,1) both}
    .hero-title .gradient{background:linear-gradient(135deg,var(--blue-light) 0%,var(--blue) 50%,var(--orange) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .hero-sub-title{font-family:'Syne',sans-serif;font-size:clamp(24px,3.5vw,44px);font-weight:400;letter-spacing:-0.02em;color:var(--muted);margin-bottom:24px;animation:fadeUp 0.7s 0.12s cubic-bezier(0.16,1,0.3,1) both}
    .hero-desc{font-size:15px;font-weight:300;font-style:italic;line-height:1.8;color:var(--white);opacity:0.75;max-width:520px;margin:0 auto 44px;animation:fadeUp 0.7s 0.16s cubic-bezier(0.16,1,0.3,1) both}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeUp 0.7s 0.22s cubic-bezier(0.16,1,0.3,1) both}
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    .btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--blue);color:white;font-size:13px;font-weight:500;letter-spacing:0.04em;border-radius:8px;text-decoration:none;transition:filter 0.2s,transform 0.2s;box-shadow:0 0 32px var(--blue-glow)}
    .btn-primary:hover{filter:brightness(1.12);transform:translateY(-2px)}
    .btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;background:transparent;color:var(--white);font-size:13px;font-weight:400;letter-spacing:0.04em;border-radius:8px;text-decoration:none;border:1px solid var(--border-hi);transition:border-color 0.2s,color 0.2s}
    .btn-ghost:hover{border-color:var(--blue);color:var(--blue-light)}
    section{padding:96px 64px;max-width:1280px;margin:0 auto}
    .section-eyebrow{font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:flex;align-items:center;gap:12px}
    .section-eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--blue)}
    .section-title{font-family:'Syne',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.05;letter-spacing:-0.03em;color:var(--white);margin-bottom:14px}
    .section-title .accent{color:var(--blue)}
    .section-title .italic{font-weight:400;font-style:italic;color:var(--muted)}
    .section-sub{font-size:15px;font-weight:300;font-style:italic;color:var(--muted);line-height:1.7;max-width:540px;margin-bottom:56px}
    .portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
    .portfolio-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;text-decoration:none;display:flex;flex-direction:column}
    .portfolio-card:hover{transform:translateY(-6px);border-color:var(--border-hi);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
    .portfolio-card:hover .card-tag{color:var(--blue);border-color:rgba(79,126,255,0.35)}
    .card-preview{width:100%;aspect-ratio:9/14;overflow:hidden;display:flex;align-items:center;justify-content:center}
    .card-info{padding:18px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
    .card-segment{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--white)}
    .card-tag{font-size:10px;font-weight:500;letter-spacing:0.06em;color:var(--muted);background:var(--surface);padding:4px 10px;border-radius:6px;border:1px solid var(--border);transition:color 0.2s,border-color 0.2s}
    /* mini previews */
    .preview-dentista{background:linear-gradient(160deg,#F5F0E8 0%,#EDE8DF 100%);width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:28px 20px 20px;gap:10px}
    .p-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#B8C9BA,#8A9E8C);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;color:white;font-family:serif;border:2px solid #C4A96B}
    .p-name{font-size:13px;font-weight:600;color:#2C2C2C;font-family:serif}
    .p-sub{font-size:8px;letter-spacing:0.1em;color:#C4A96B;text-transform:uppercase}
    .p-divider{width:60%;height:1px;background:linear-gradient(to right,transparent,#B8C9BA,transparent)}
    .p-link{width:100%;background:white;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:8px;border:1px solid rgba(138,158,140,0.2)}
    .p-link-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
    .p-link-text{font-size:8px;color:#555}
    .p-link-bold{font-size:9px;font-weight:600;color:#2C2C2C;display:block}
    .preview-barbearia{background:#0E0E0E;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:28px 20px 20px;gap:10px}
    .p-hex{width:48px;height:48px;background:#D4882A;clip-path:polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#D4882A;font-family:sans-serif;position:relative}
    .p-hex::before{content:'N';position:absolute;width:80%;height:80%;background:#0E0E0E;clip-path:polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);display:flex;align-items:center;justify-content:center;font-size:16px;color:#D4882A;line-height:1;padding-top:2px}
    .p-bname{font-size:18px;font-weight:900;color:#EDE8DF;letter-spacing:0.06em}
    .p-bsub{font-size:8px;letter-spacing:0.15em;color:#888;text-transform:uppercase}
    .p-cta{width:100%;background:#D4882A;border-radius:7px;padding:9px 10px;display:flex;align-items:center;gap:7px}
    .p-cta-text{font-size:10px;font-weight:900;color:#0E0E0E;letter-spacing:0.04em}
    .p-dark-link{width:100%;background:#212121;border-radius:7px;padding:8px 10px;display:flex;align-items:center;gap:8px;border:1px solid #2E2E2E}
    .p-dark-text{font-size:8px;font-weight:500;color:#EDE8DF}
    .preview-rep{background:#F4F6FA;width:100%;height:100%;display:flex;flex-direction:column;align-items:center}
    .p-rep-hero{width:100%;background:linear-gradient(135deg,#0F2444,#1B3A6B);padding:20px 16px 32px;display:flex;flex-direction:column;align-items:center;gap:6px}
    .p-rep-badge{font-size:7px;letter-spacing:0.12em;text-transform:uppercase;color:#F59E0B;border:1px solid rgba(245,158,11,0.4);padding:3px 8px;border-radius:99px}
    .p-rep-av{width:38px;height:38px;border-radius:50%;background:#0F2444;border:2px solid #2563EB;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:white}
    .p-rep-name{font-size:13px;font-weight:800;color:white;letter-spacing:-0.02em}
    .p-rep-sub{font-size:7px;color:rgba(255,255,255,0.5);letter-spacing:0.06em}
    .p-stats{width:calc(100% - 24px);background:white;border-radius:8px;margin-top:-14px;padding:10px 6px;display:grid;grid-template-columns:1fr 1fr 1fr;box-shadow:0 4px 14px rgba(15,36,68,0.12)}
    .p-stat{display:flex;flex-direction:column;align-items:center;border-right:1px solid #E2E8F0;padding:0 4px}
    .p-stat:last-child{border-right:none}
    .p-stat-n{font-size:13px;font-weight:800;color:#0F2444}
    .p-stat-l{font-size:6px;color:#8896AB;text-align:center}
    .p-rep-body{padding:10px 12px;width:100%;display:flex;flex-direction:column;gap:6px}
    .p-wa{width:100%;background:#25D366;border-radius:7px;padding:8px 10px;display:flex;align-items:center;gap:6px}
    .p-wa-text{font-size:9px;font-weight:700;color:white}
    .p-light-link{width:100%;background:white;border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:7px;border:1px solid #E2E8F0}
    .p-light-text{font-size:8px;font-weight:500;color:#1A1A2E}
    /* steps */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .steps-wrap{max-width:1100px;margin:0 auto;width:100%}
    .step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px 24px;transition:border-color 0.2s}
    .step:hover{border-color:var(--border-hi)}
    .step-num{font-family:'Syne',sans-serif;font-size:48px;font-weight:800;color:var(--border-hi);line-height:1;margin-bottom:16px}
    .step-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--white);margin-bottom:8px}
    .step-desc{font-size:13px;font-weight:300;color:var(--muted);line-height:1.6}
    /* pricing */
    .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .pricing-grid-2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .pricing-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;gap:20px;transition:border-color 0.2s,transform 0.2s}
    .pricing-card:hover{border-color:var(--border-hi);transform:translateY(-3px)}
    .pricing-card.featured{border-color:var(--blue);background:linear-gradient(145deg,var(--card),rgba(79,126,255,0.06));box-shadow:0 0 40px var(--blue-glow)}
    .pricing-tag{font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue)}
    .pricing-name{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--white)}
    .pricing-price{display:flex;align-items:baseline;gap:4px}
    .pricing-currency{font-size:16px;font-weight:500;color:var(--muted)}
    .pricing-value{font-family:'Syne',sans-serif;font-size:48px;font-weight:800;color:var(--white);line-height:1}
    .pricing-period{font-size:12px;color:var(--muted);align-self:flex-end;margin-bottom:4px}
    .pricing-features{list-style:none;display:flex;flex-direction:column;gap:10px}
    .pricing-features li{font-size:13px;font-weight:400;color:var(--white);display:flex;align-items:flex-start;gap:10px;line-height:1.5}
    .pricing-features li::before{content:'';flex-shrink:0;margin-top:3px;width:16px;height:16px;border-radius:50%;background:rgba(79,126,255,0.12);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5 6.5-7' stroke='%234F7EFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:cover}
    .pricing-btn{padding:13px;border-radius:10px;text-align:center;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:filter 0.2s,transform 0.2s,border-color 0.2s,color 0.2s;display:block}
    .pricing-btn.outline{border:1px solid var(--border-hi);color:var(--white)}
    .pricing-btn.outline:hover{border-color:var(--blue);color:var(--white)}
    .pricing-btn.filled{background:var(--blue);color:white;box-shadow:0 0 20px var(--blue-glow)}
    .pricing-btn.filled:hover{filter:brightness(1.1);transform:translateY(-1px)}
    /* cta */
    .cta-final{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:72px 40px;text-align:center;position:relative;overflow:hidden}
    .cta-final::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:400px;height:300px;background:radial-gradient(ellipse,rgba(79,126,255,0.12) 0%,transparent 70%);pointer-events:none}
    .cta-final-title{font-family:'Syne',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-0.03em;color:var(--white);line-height:1.1;margin-bottom:16px}
    .cta-final-title .accent{color:var(--blue)}
    .cta-final-sub{font-size:15px;font-weight:300;font-style:italic;color:var(--muted);margin-bottom:36px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.7}
    .btn-wa{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:#25D366;color:white;font-family:'Syne',sans-serif;font-size:14px;font-weight:700;border-radius:10px;text-decoration:none;transition:filter 0.2s,transform 0.2s;box-shadow:0 0 30px rgba(37,211,102,0.2)}
    .btn-wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
    /* footer */
    footer{border-top:1px solid var(--border);padding:32px 64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
    .footer-copy{font-size:12px;color:var(--muted)}
    .footer-social{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
    .footer-social-link{width:28px;height:28px;border-radius:6px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:13px;transition:border-color 0.2s,color 0.2s,background 0.2s}
    .footer-social-link:hover{background:var(--blue-dim);color:var(--blue-light);border-color:rgba(79,126,255,0.25)}
    .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.5s ease,transform 0.5s ease}
    .reveal.visible{opacity:1;transform:translateY(0)}
    @media(max-width:1024px){
      .nav-inner{padding:0 32px}
      .nav-links{display:none}
      section{padding:72px 40px}
      .pricing-grid,.pricing-grid-2{grid-template-columns:1fr}
      footer{padding:32px 40px}
    }
    @media(max-width:768px){
      section{padding:64px 20px}
      .hero{padding:120px 20px 80px}
      .portfolio-grid{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      footer{padding:24px 20px;flex-direction:column;align-items:flex-start}
      .cta-final{padding:48px 24px}
    }
   /* ── Featured Card: Site em Destaque ── */
  .featured-site-wrap {
    margin-bottom: 16px;
  }
  .featured-site {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 300px;
  }
  .featured-site:hover {
    transform: translateY(-5px);
    border-color: var(--border-hi);
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  }

  /* Lado esquerdo: info */
  .featured-info {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    border-right: 1px solid var(--border);
  }
  .featured-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .badge-destaque {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(167,102,80,0.18), rgba(167,102,80,0.08));
    border: 1px solid rgba(167,102,80,0.35);
    color: #C48A72;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 99px;
  }
  .badge-destaque-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C48A72;
    box-shadow: 0 0 6px rgba(196,138,114,0.8);
    animation: pulse-rose 2s ease-in-out infinite;
  }
  @keyframes pulse-rose {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
  .badge-tipo {
    display: inline-flex;
    background: rgba(79,126,255,0.12);
    border: 1px solid rgba(79,126,255,0.2);
    color: var(--blue-light);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 99px;
  }
  .featured-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: block;
    margin-bottom: 4px;
  }
  .featured-segment {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.03em;
    display: block;
  }
  .featured-desc {
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    color: var(--white);
    line-height: 1.7;
    opacity: 0.8;
    max-width: 320px;
  }
  .featured-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .featured-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--surface);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
  }
  .featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #A76650, #C48A72);
    color: white;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    transition: filter 0.2s, transform 0.2s;
    box-shadow: 0 0 24px rgba(167,102,80,0.3);
  }
  .featured-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }

  /* Lado direito: mockup Mac */
  .featured-mockup {
    background: linear-gradient(145deg, #0B0B10 0%, #111118 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 28px 20px;
    position: relative;
    overflow: hidden;
  }
  /* Orb de fundo sutil */
  .featured-mockup::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(167,102,80,0.10) 0%, transparent 70%);
    pointer-events: none;
  }
  .mac-window {
    width: 100%;
    max-width: 520px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.08),
      0 20px 60px rgba(0,0,0,0.7),
      0 8px 24px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
  }
  /* Barra de título Mac */
  .mac-bar {
    background: #1E1E1E;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
  }
  .mac-dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .mac-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  .mac-dot-red   { background: #FF5F57; box-shadow: 0 0 4px rgba(255,95,87,0.5); }
  .mac-dot-yellow{ background: #FFBD2E; box-shadow: 0 0 4px rgba(255,189,46,0.4); }
  .mac-dot-green { background: #28C840; box-shadow: 0 0 4px rgba(40,200,64,0.4); }
  /* Barra de URL centralizada */
  .mac-url-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px;
    padding: 3px 14px;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.01em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mac-url-lock {
    width: 8px;
    height: 8px;
    opacity: 0.5;
  }
  /* Conteúdo do site dentro do mockup */
  .mac-content {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #FAF8F5;
    position: relative;
  }
  /* Mini preview do Élara dentro do mockup */
  .elara-nav {
    background: rgba(250,248,245,0.95);
    border-bottom: 1px solid rgba(180,160,140,0.2);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(8px);
    flex-shrink: 0;
  }
  .elara-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: 11px;
    font-weight: 600;
    color: #3D2820;
    letter-spacing: 0.02em;
  }
  .elara-brand svg { color: #A76650; }
  .elara-nav-links {
    display: flex;
    gap: 14px;
  }
  .elara-nav-links span {
    font-size: 7px;
    color: #8A7060;
    letter-spacing: 0.06em;
  }
  .elara-nav-btn {
    font-size: 7px;
    font-weight: 600;
    background: #A76650;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    letter-spacing: 0.04em;
  }
  .elara-hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    position: relative;
  }
  .elara-hero-text {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    background: #FAF8F5;
  }
  .elara-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(167,102,80,0.10);
    border: 1px solid rgba(167,102,80,0.25);
    color: #A76650;
    font-size: 6px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 99px;
    width: fit-content;
  }
  .elara-h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    color: #2C1A12;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .elara-h1 em { color: #A76650; font-style: italic; }
  .elara-subdesc {
    font-size: 7px;
    color: #8A7060;
    line-height: 1.5;
    max-width: 180px;
  }
  .elara-btns {
    display: flex;
    gap: 5px;
    margin-top: 2px;
  }
  .elara-btn-primary {
    font-size: 7px;
    font-weight: 600;
    background: #A76650;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }
  .elara-btn-outline {
    font-size: 7px;
    color: #5A3C30;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid rgba(167,102,80,0.3);
  }
  .elara-stars {
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .elara-stars svg { fill: #D4882A; }
  .elara-stars span { font-size: 6px; color: #8A7060; }
  .elara-hero-image {
    background: linear-gradient(135deg, #E8DDD5 0%, #D4C4B8 50%, #C4B0A0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .elara-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=400&q=70&fit=crop") center/cover no-repeat;
    opacity: 0.6;
  }
  .elara-features-strip {
    background: white;
    border-top: 1px solid rgba(180,160,140,0.2);
    padding: 8px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex-shrink: 0;
  }
  .elara-feat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .elara-feat-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(167,102,80,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    margin-bottom: 1px;
  }
  .elara-feat-title { font-size: 6.5px; font-weight: 700; color: #2C1A12; }
  .elara-feat-sub   { font-size: 5.5px; color: #9A8070; line-height: 1.3; }

  /* Responsive */
  @media (max-width: 860px) {
    .featured-site {
      grid-template-columns: 1fr;
    }
    .featured-info {
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 28px 28px;
    }
    .featured-mockup {
      padding: 20px 20px 16px;
      min-height: 240px;
    }
  }
  @media (max-width: 520px) {
    .featured-info { padding: 24px 20px; }
    .elara-nav-links { display: none; }
  }
@keyframes spin{to{transform:rotate(360deg)}}