:root { --ink:#0a1628; --deep:#071020; --teal:#00c4a7; --teal-dim:#009e86; --amber:#f5a623; --slate:#1e3a5f; --slate-light:#2b5180; --white:#f9fbfc; --gray:#8fa8c0; --mono:'Space Mono',monospace; --sans:'Sora',sans-serif; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--deep); color:var(--white); font-family:var(--sans); overflow-x:hidden; }
  nav { position:fixed; top:0; left:0; right:0; z-index:999; display:flex; align-items:center; justify-content:space-between; padding:1rem 4rem; background:rgba(7,16,32,0.85); backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,196,167,0.15); }
  .nav-logo { font-family:var(--mono); font-size:1.1rem; color:var(--teal); text-decoration:none; letter-spacing:0.08em; }
  .nav-logo span { color:var(--white); }
  .nav-links { display:flex; gap:2rem; list-style:none; }
  .nav-links a { color:var(--gray); text-decoration:none; font-size:0.85rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; transition:color 0.2s; }
  .nav-links a:hover, .nav-links a.active { color:var(--teal); }
  .nav-cta { background:var(--teal); color:var(--deep)!important; padding:0.5rem 1.2rem; border-radius:4px; font-weight:700!important; }

  .page-hero { padding:10rem 4rem 6rem; background:var(--ink); position:relative; overflow:hidden; }
  .page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 80% 30%, rgba(0,196,167,0.07) 0%, transparent 70%); pointer-events:none; }
  .hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,196,167,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,196,167,0.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
  .section-tag { font-family:var(--mono); font-size:0.72rem; color:var(--teal); letter-spacing:0.25em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; }
  .section-tag::before { content:''; display:inline-block; width:2rem; height:1px; background:var(--teal); }
  h1 { font-size:clamp(2.2rem,4vw,3.5rem); font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin-bottom:1rem; }
  h1 em { font-style:normal; color:var(--teal); }
  .lead { color:var(--gray); font-size:1.05rem; line-height:1.85; max-width:580px; }

  /* SERVICES HERO GRID */
  .services-hero-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1100px; margin:0 auto; padding:5rem 4rem; }
  .svc-card { background:var(--ink); border:1px solid rgba(0,196,167,0.1); border-radius:6px; padding:2.5rem 2rem; transition:all 0.3s; position:relative; overflow:hidden; }
  .svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right, var(--teal-dim), var(--teal)); opacity:0; transition:opacity 0.3s; }
  .svc-card:hover { border-color:rgba(0,196,167,0.3); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,196,167,0.08); }
  .svc-card:hover::before { opacity:1; }
  .svc-icon { width:56px; height:56px; background:rgba(0,196,167,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.75rem; margin-bottom:1.5rem; }
  .svc-title { font-size:1.05rem; font-weight:700; margin-bottom:0.75rem; }
  .svc-desc { font-size:0.875rem; color:var(--gray); line-height:1.8; margin-bottom:1.5rem; }
  .svc-features { list-style:none; }
  .svc-features li { font-size:0.82rem; color:var(--gray); padding:0.35rem 0; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:0.5rem; }
  .svc-features li::before { content:'\\2192'; color:var(--teal); font-family:var(--mono); font-size:0.7rem; flex-shrink:0; }

  /* PRICING */
  .pricing-section { padding:5rem 4rem; background:var(--ink); }
  .pricing-inner { max-width:1100px; margin:0 auto; }
  .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
  .price-card { background:var(--deep); border:1px solid rgba(0,196,167,0.1); border-radius:6px; padding:2.5rem 2rem; position:relative; }
  .price-card.featured { border-color:rgba(0,196,167,0.5); background:linear-gradient(160deg, rgba(0,196,167,0.05) 0%, var(--deep) 100%); }
  .price-card.featured::before { content:'En Pop\00fcler'; position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--teal); color:var(--deep); font-family:var(--mono); font-size:0.65rem; font-weight:700; padding:0.3rem 1rem; border-radius:0 0 4px 4px; letter-spacing:0.1em; }
  .price-tier { font-family:var(--mono); font-size:0.7rem; color:var(--teal); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:0.75rem; }
  .price-name { font-size:1.2rem; font-weight:700; margin-bottom:1rem; }
  .price-amount { font-family:var(--mono); font-size:2.5rem; font-weight:700; color:var(--teal); margin-bottom:0.25rem; }
  .price-period { font-size:0.8rem; color:var(--gray); margin-bottom:2rem; }
  .price-list { list-style:none; margin-bottom:2rem; }
  .price-list li { font-size:0.85rem; color:var(--gray); padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:0.5rem; }
  .price-list li.yes { color:var(--white); }
  .price-list li.yes::before { content:'\\2192'; color:var(--teal); font-weight:700; }
  .price-list li.no::before { content:'\\2192'; color:rgba(255,255,255,0.2); }
  .btn-primary { display:block; text-align:center; background:var(--teal); color:var(--deep); font-family:var(--sans); font-weight:700; font-size:0.9rem; padding:0.9rem 2rem; border-radius:4px; text-decoration:none; letter-spacing:0.05em; transition:all 0.25s; }
  .btn-primary:hover { background:var(--teal-dim); }
  .btn-outline { display:block; text-align:center; border:1px solid rgba(0,196,167,0.4); color:var(--teal); font-family:var(--sans); font-weight:600; font-size:0.9rem; padding:0.9rem 2rem; border-radius:4px; text-decoration:none; transition:all 0.25s; }
  .btn-outline:hover { border-color:var(--teal); background:rgba(0,196,167,0.08); }

  /* PROCESS */
  .process { padding:5rem 4rem; background:var(--deep); }
  .process-inner { max-width:1100px; margin:0 auto; }
  .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; position:relative; }
  .steps::before { content:''; position:absolute; top:2rem; left:10%; right:10%; height:1px; background:rgba(0,196,167,0.15); z-index:0; }
  .step { text-align:center; position:relative; z-index:1; }
  .step-num { width:4rem; height:4rem; border-radius:50%; background:var(--ink); border:2px solid rgba(0,196,167,0.3); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:1rem; color:var(--teal); margin:0 auto 1rem; }
  .step-title { font-size:0.9rem; font-weight:700; margin-bottom:0.5rem; }
  .step-desc { font-size:0.8rem; color:var(--gray); line-height:1.7; }

  /* FAQ */
  .faq { padding:5rem 4rem; background:var(--ink); }
  .faq-inner { max-width:800px; margin:0 auto; }
  .faq-item { border-bottom:1px solid rgba(255,255,255,0.07); }
  .faq-q { padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:0.95rem; font-weight:600; color:var(--white); }
  .faq-q span { color:var(--teal); font-size:1.2rem; transition:transform 0.2s; }
  .faq-a { padding:0 0 1.5rem; font-size:0.875rem; color:var(--gray); line-height:1.8; display:none; }
  .faq-item.open .faq-a { display:block; }
  .faq-item.open .faq-q span { transform:rotate(45deg); }

  footer { background:var(--deep); border-top:1px solid rgba(0,196,167,0.1); padding:3rem 4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
  .footer-logo { font-family:var(--mono); color:var(--teal); font-size:1rem; text-decoration:none; }
  .footer-copy { color:var(--gray); font-size:0.8rem; }
  .footer-links { display:flex; gap:1.5rem; }
  .footer-links a { color:var(--gray); text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
  .footer-links a:hover { color:var(--teal); }

  @media(max-width:900px) {
    nav { padding:1rem 2rem; } .nav-links { display:none; }
    .page-hero,.services-hero-grid,.pricing-section,.process,.faq { padding:4rem 2rem; }
    .services-hero-grid,.pricing-grid { grid-template-columns:1fr; }
    .steps { grid-template-columns:1fr 1fr; }
    footer { flex-direction:column; align-items:flex-start; padding:2rem; }
  }