/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 452:0 Unexpected "<"
Line 950:44 Comments in CSS use "/* ... */" instead of "//"
Line 951:44 Comments in CSS use "/* ... */" instead of "//"
Line 952:44 Comments in CSS use "/* ... */" instead of "//"
Line 954:4 Comments in CSS use "/* ... */" instead of "//"
Line 955:4 Comments in CSS use "/* ... */" instead of "//"
Line 956:4 Comments in CSS use "/* ... */" instead of "//"
Line 957:4 Comments in CSS use "/* ... */" instead of "//"
Line 958:4 Comments in CSS use "/* ... */" instead of "//"
... and 91 more hidden warnings

**/
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pitbull în Finanțe — Cătălin Demsa, Consultant Financiar</title>
<meta name="description" content="Cătălin Demsa — consultant financiar independent. Credite, economii, investiții, asigurări și pensie privată, cu energie de Mr. Worldwide.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
  :root{
    --navy:#0A1B3D;
    --navy-2:#0F2A5C;
    --blue:#1C5BFF;
    --blue-2:#4D86FF;
    --ice:#F3F7FF;
    --white:#FFFFFF;
    --ink:#0A1B3D;
    --steel:#5B6B8C;
    --line:rgba(10,27,61,.12);
    --line-soft:rgba(10,27,61,.08);
    --shadow:0 18px 40px -18px rgba(10,27,61,.35);
    --radius:18px;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

  h1,h2,h3{
    font-family:'Anton', sans-serif;
    font-weight:400;
    letter-spacing:.01em;
    line-height:1.04;
    margin:0;
    text-transform:uppercase;
  }
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:12.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--blue);
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--blue);
    display:inline-block;
  }
  p{line-height:1.65; color:var(--steel); margin:0;}
  .section{padding:96px 0;}
  @media(max-width:760px){ .section{padding:64px 0;} }
  section[id], #top{scroll-margin-top:90px;}

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700; font-size:15px;
    padding:15px 26px;
    border-radius:100px;
    border:2px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--blue); color:var(--white); box-shadow:0 14px 28px -12px rgba(28,91,255,.55);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(28,91,255,.6);}
  .btn-ghost{background:transparent; border-color:rgba(255,255,255,.4); color:var(--white);}
  .btn-ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px);}
  .btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
  .btn-outline:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
  .btn-sm{padding:11px 20px; font-size:13.5px;}
  .btn-block{width:100%; justify-content:center;}

  /* ---------- Sprite (hidden) ---------- */
  .sprite{position:absolute; width:0; height:0; overflow:hidden;}

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    max-width:var(--maxw); margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand-icon{width:36px; height:36px; flex:none;}
  .brand-word{display:flex; flex-direction:column; line-height:1;}
  .brand-word b{font-family:'Anton', sans-serif; font-size:17px; letter-spacing:.02em; color:var(--navy);}
  .brand-word span{font-family:'Space Mono', monospace; font-size:9.5px; letter-spacing:.22em; color:var(--blue); margin-top:3px;}

  .nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
  .nav-links a{font-size:14.5px; font-weight:600; text-decoration:none; color:var(--navy); opacity:.8; transition:opacity .15s, color .15s;}
  .nav-links a:hover{opacity:1; color:var(--blue);}
  .nav-right{display:flex; align-items:center; gap:18px;}
  .social-mini{display:flex; gap:10px;}
  .social-mini a{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--line); color:var(--navy);
    transition:.15s;
  }
  .social-mini a:hover{background:var(--blue); border-color:var(--blue); color:#fff;}
  .social-mini svg{width:16px; height:16px;}

  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{width:24px; height:2.5px; background:var(--navy); border-radius:2px; transition:.2s;}

  .mobile-menu{
    display:none; flex-direction:column; gap:2px;
    background:var(--white); border-top:1px solid var(--line-soft);
    padding:10px 28px 18px;
  }
  .mobile-menu a{padding:12px 0; font-weight:600; text-decoration:none; color:var(--navy); border-bottom:1px solid var(--line-soft);}
  .mobile-menu.open{display:flex;}

  @media(max-width:920px){
    .nav-links, .nav-right .btn{display:none;}
    .burger{display:flex;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:radial-gradient(120% 140% at 80% -10%, var(--navy-2) 0%, var(--navy) 55%, #081530 100%);
    color:var(--white);
    padding:84px 0 130px;
    clip-path:polygon(0 0,100% 0,100% 100%,0 96%);
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 64px);
    pointer-events:none;
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  }
  @media(max-width:920px){ .hero-grid{grid-template-columns:1fr;} }

  .hero h1{font-size:clamp(36px,5.4vw,64px); color:#fff;}
  .hero h1 .hl{color:var(--blue-2);}
  .hero p.lead{color:rgba(255,255,255,.78); font-size:17.5px; max-width:540px; margin-top:20px;}
  .hero-eyebrow{color:var(--blue-2);}
  .hero-eyebrow::before{background:var(--blue-2);}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
  .hero-trust{margin-top:18px; font-size:13px; color:rgba(255,255,255,.55); font-family:'Space Mono',monospace;}

  .hero-art{position:relative; display:flex; justify-content:center; align-items:center;}
  .hero-frame{
    position:relative; width:100%; max-width:340px; aspect-ratio:4/5;
    border-radius:26px;
    background:linear-gradient(155deg, var(--blue) 0%, var(--navy-2) 100%);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .hero-frame::after{
    content:"FOTO TA AICI";
    position:absolute; inset:14px;
    border:1.5px dashed rgba(255,255,255,.35);
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em;
    color:rgba(255,255,255,.5);
  }
  .hero-frame svg{width:58%; opacity:.9;}
  .hero-badge-float{
    position:absolute; right:-18px; bottom:-22px;
    width:128px; height:128px;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.4));
    animation:spin 36s linear infinite;
  }
  @media(max-width:920px){ .hero-badge-float{right:6px; bottom:-14px; width:104px; height:104px;} }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  @media (prefers-reduced-motion:reduce){ .hero-badge-float{animation:none;} }

  /* ---------- STATS ---------- */
  .stats-wrap{margin-top:-78px; position:relative; z-index:3;}
  .stats-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:34px 18px;
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  @media(max-width:760px){ .stats-card{grid-template-columns:repeat(2,1fr); gap:26px 0;} }
  .stat{text-align:center; padding:0 10px; border-right:1px solid var(--line-soft);}
  .stat:last-child{border-right:none;}
  @media(max-width:760px){ .stat:nth-child(2n){border-right:none;} }
  .stat b{font-family:'Anton',sans-serif; font-size:clamp(28px,4vw,38px); color:var(--navy); display:block;}
  .stat span{font-family:'Space Mono',monospace; font-size:11.5px; color:var(--steel); letter-spacing:.02em; display:block; margin-top:6px; line-height:1.4;}
  .stats-foot{text-align:center; font-size:12px; color:var(--steel); opacity:.7; margin-top:14px; font-style:italic;}

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:flex-start; margin-top:30px;}
  @media(max-width:880px){ .about-grid{grid-template-columns:1fr; gap:36px;} }
  .about-grid h2{font-size:clamp(28px,4vw,40px); margin-top:14px; max-width:480px;}
  .about-copy p + p{margin-top:16px;}
  .pullquote{
    margin-top:26px; padding:22px 24px;
    border-left:4px solid var(--blue);
    background:var(--ice);
    border-radius:0 14px 14px 0;
    font-family:'Anton',sans-serif; font-size:19px; line-height:1.3;
    text-transform:none; color:var(--navy);
  }
  .pullquote cite{display:block; margin-top:10px; font-family:'Space Mono',monospace; font-size:12px; color:var(--blue); font-style:normal; letter-spacing:.05em;}
  .values{display:flex; flex-direction:column; gap:18px; margin-top:30px;}
  .value{display:flex; gap:14px; align-items:flex-start;}
  .value-icon{
    width:42px; height:42px; flex:none; border-radius:12px;
    background:var(--ice); display:flex; align-items:center; justify-content:center;
  }
  .value-icon svg{width:20px; height:20px; stroke:var(--blue);}
  .value h4{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:15px; text-transform:none; margin:0 0 3px;}
  .value p{font-size:14px;}
  .about-social{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}

  /* ---------- SERVICES (SHOP) ---------- */
  .section-head{max-width:640px;}
  .section-head h2{font-size:clamp(28px,4vw,40px); margin-top:14px;}
  .section-head p{margin-top:14px; font-size:16px;}

  .services-grid{
    margin-top:48px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  @media(max-width:980px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:640px){ .services-grid{grid-template-columns:1fr;} }

  .product-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px 24px 24px;
    background:var(--white);
    display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position:relative;
  }
  .product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent;}
  .product-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .product-icon{width:46px; height:46px; border-radius:13px; background:var(--navy); display:flex; align-items:center; justify-content:center; flex:none;}
  .product-icon svg{width:22px; height:22px; stroke:#fff;}
  .price-tag{
    font-family:'Space Mono',monospace; font-size:11.5px; font-weight:700;
    background:var(--ice); color:var(--blue);
    padding:6px 11px; border-radius:100px; white-space:nowrap;
  }
  .product-card h3{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:18px; text-transform:none; margin-top:18px;}
  .product-card p.desc{margin-top:8px; font-size:14.5px; flex:1;}
  .product-card .btn{margin-top:20px;}

  /* ---------- PROCESS ---------- */
  .process{background:var(--ice); clip-path:polygon(0 4%,100% 0,100% 100%,0 100%);}
  .process-grid{margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; counter-reset:step;}
  @media(max-width:820px){ .process-grid{grid-template-columns:1fr;} }
  .step{position:relative; padding-top:6px;}
  .step .num{
    font-family:'Anton',sans-serif; font-size:54px; color:var(--blue); opacity:.18; line-height:1;
  }
  .step h3{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:18px; text-transform:none; margin-top:6px;}
  .step p{margin-top:8px; font-size:14.5px;}

  /* ---------- TESTIMONIALS ---------- */
  .testi-head{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .stamp{width:96px; height:96px; flex:none; opacity:.92; transform:rotate(-9deg);}
  .testi-grid{margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:900px){ .testi-grid{grid-template-columns:1fr;} }
  .testi-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; display:flex; flex-direction:column; gap:14px;
  }
  .stars{color:var(--blue); font-size:15px; letter-spacing:2px;}
  .testi-card p.quote{font-size:15px; color:var(--ink); line-height:1.6;}
  .testi-who{display:flex; align-items:center; gap:12px; margin-top:auto;}
  .avatar-dot{width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:15px;}
  .testi-who b{display:block; font-size:14px;}
  .testi-who span{display:block; font-size:12.5px; color:var(--steel);}
  .testi-note{margin-top:22px; font-size:12.5px; color:var(--steel); font-style:italic; text-align:center;}

  /* ---------- LEAD MAGNET ---------- */
  .magnet{
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #0E2C66 100%);
    color:#fff; border-radius:28px; padding:64px 48px;
    display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
    position:relative; overflow:hidden;
  }
  .magnet::before{
    content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
    background:radial-gradient(circle, rgba(77,134,255,.35), transparent 70%);
  }
  @media(max-width:880px){ .magnet{grid-template-columns:1fr; padding:42px 26px;} }
  .magnet h2{color:#fff; font-size:clamp(26px,3.6vw,36px);}
  .magnet p{color:rgba(255,255,255,.75); margin-top:14px; max-width:460px;}
  .magnet-form{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap;}
  .magnet-form input{
    flex:1; min-width:200px; padding:15px 18px; border-radius:100px; border:none;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:14.5px; outline:none;
  }
  .magnet-form .btn{flex:none;}
  .magnet-confirm{display:none; margin-top:16px; font-size:14px; color:#9FE6B0; font-weight:700;}
  .magnet-fine{margin-top:14px; font-size:12px; color:rgba(255,255,255,.5);}
  .magnet-art{display:flex; justify-content:center;}
  .magnet-art svg{width:180px;}

  .lead-divider{display:flex; align-items:center; gap:12px; margin:24px 0 18px; color:rgba(255,255,255,.35); font-size:11px; font-family:'Space Mono',monospace; letter-spacing:.1em;}
  .lead-divider::before, .lead-divider::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.15);}
  .lead-sub{font-size:13.5px; color:rgba(255,255,255,.65); margin-bottom:10px;}

  /* ---------- CONTACT FORM ---------- */
  .contact-wrap{margin-top:48px; display:grid; grid-template-columns:1.3fr .9fr; gap:28px; text-align:left;}
  @media(max-width:880px){ .contact-wrap{grid-template-columns:1fr;} }
  .contact-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
  .field label{font-size:12.5px; font-weight:700; color:var(--navy);}
  .field input, .field textarea, .field select{
    padding:13px 16px; border-radius:12px; border:1.5px solid var(--line);
    font-family:'Plus Jakarta Sans',sans-serif; font-size:14.5px; outline:none; resize:vertical;
    transition:border-color .15s, box-shadow .3s; width:100%; background:#fff;
  }
  .field input:focus, .field textarea:focus, .field select:focus{border-color:var(--blue);}
  .field select.highlight{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(28,91,255,.15);
    animation:fieldPulse 1.4s ease;
  }
  @keyframes fieldPulse{
    0%{box-shadow:0 0 0 0 rgba(28,91,255,.35);}
    60%{box-shadow:0 0 0 8px rgba(28,91,255,0);}
    100%{box-shadow:0 0 0 4px rgba(28,91,255,.15);}
  }
  .form-status{margin-top:14px; font-size:13.5px; font-weight:700; display:none; align-items:center; gap:8px;}
  .form-status.show{display:flex;}
  .form-status.success{color:#1a8f4c;}
  .form-status.error{color:#c0392b;}
  .form-fine{margin-top:14px; font-size:12px; color:var(--steel);}

  .btn .spin{width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; display:none; animation:spinrot .7s linear infinite;}
  .btn-outline .spin{border-color:rgba(10,27,61,.25); border-top-color:var(--navy);}
  .btn.loading .spin{display:inline-block;}
  .btn.loading .btn-label{opacity:.7;}
  .btn[disabled]{cursor:default;}
  @keyframes spinrot{to{transform:rotate(360deg);}}

  .contact-side{background:var(--navy); border-radius:var(--radius); padding:30px; color:#fff; display:flex; flex-direction:column; gap:16px;}
  .contact-side h4{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin:0; color:rgba(255,255,255,.5);}
  .contact-side .row{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; font-size:14.5px; font-weight:600;}
  .contact-side .row svg{width:18px; height:18px; stroke:var(--blue-2); flex:none;}
  .contact-side .divider{height:1px; background:rgba(255,255,255,.12); margin:2px 0;}

  /* ---------- FAQ ---------- */
  .faq-list{margin-top:40px; max-width:760px;}
  details{border-bottom:1px solid var(--line); padding:20px 0;}
  details summary{
    list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-weight:700; font-size:16px; color:var(--navy);
  }
  details summary::-webkit-details-marker{display:none;}
  details summary .plus{
    width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); flex:none;
    display:flex; align-items:center; justify-content:center; position:relative; transition:.2s;
  }
  details summary .plus::before, details summary .plus::after{
    content:""; position:absolute; background:var(--navy); transition:.2s;
  }
  details summary .plus::before{width:10px; height:1.6px;}
  details summary .plus::after{width:1.6px; height:10px;}
  details[open] summary .plus{transform:rotate(45deg); border-color:var(--blue);}
  details[open] summary .plus::before, details[open] summary .plus::after{background:var(--blue);}
  details p{margin-top:14px; font-size:14.5px; max-width:620px;}

  /* ---------- FINAL CTA ---------- */
  .final-cta{
    background:var(--ice);
    text-align:center;
    padding:90px 0;
    clip-path:polygon(0 0,100% 6%,100% 100%,0 100%);
  }
  .final-cta h2{font-size:clamp(30px,5vw,52px); max-width:760px; margin:14px auto 0;}
  .final-cta p{max-width:520px; margin:18px auto 0; font-size:16px;}
  .final-cta .hero-ctas{justify-content:center; margin-top:32px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy); color:rgba(255,255,255,.7); padding:60px 0 26px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;}
  @media(max-width:820px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:540px){ .footer-grid{grid-template-columns:1fr;} }
  .footer-brand .brand-word b{color:#fff;}
  .footer-brand p{margin-top:14px; font-size:14px; max-width:280px; color:rgba(255,255,255,.55);}
  .footer-col h5{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 16px;}
  .footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
  .footer-col a{text-decoration:none; font-size:14px; color:rgba(255,255,255,.75); transition:.15s;}
  .footer-col a:hover{color:#fff;}
  .footer-social{display:flex; gap:10px; margin-top:16px;}
  .footer-social a{
    width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center; transition:.15s;
  }
  .footer-social a:hover{background:var(--blue); border-color:var(--blue);}
  .footer-social svg{width:16px; height:16px; stroke:#fff;}
  .footer-bottom{
    margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:12.5px; color:rgba(255,255,255,.45);
  }
  .footer-disclaimer{font-size:11.5px; color:rgba(255,255,255,.35); max-width:760px; margin-top:14px; line-height:1.6;}

  ::selection{background:var(--blue); color:#fff;}
</style>
</head>
<body>

<!-- ============ SVG SPRITE ============ -->
<svg class="sprite" aria-hidden="true">
  <symbol id="ic-shield" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.6-3 7.6-7 9-4-1.4-7-4.4-7-9V6l7-3z"/></symbol>
  <symbol id="ic-coins" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="9" cy="7" rx="6" ry="3"/><path d="M3 7v5c0 1.7 2.7 3 6 3s6-1.3 6-3V7"/><path d="M3 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/><path d="M15 9c3.2.2 6 1.4 6 3s-2.8 2.8-6 3"/><path d="M21 12v5c0 1.5-2.3 2.7-5.2 2.9"/></symbol>
  <symbol id="ic-house" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-7 9 7"/><path d="M5 10v9a1 1 0 001 1h12a1 1 0 001-1v-9"/><path d="M9 20v-6h6v6"/></symbol>
  <symbol id="ic-chart" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M7 19V10"/><path d="M12 19V5"/><path d="M17 19v-7"/></symbol>
  <symbol id="ic-clock" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></symbol>
  <symbol id="ic-book" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5C4 4.7 4.7 4 5.5 4H12v16H5.5A1.5 1.5 0 014 18.5v-13z"/><path d="M20 5.5c0-.8-.7-1.5-1.5-1.5H12v16h6.5a1.5 1.5 0 001.5-1.5v-13z"/></symbol>
  <symbol id="ic-compass" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M15 9l-2 6-6 2 2-6 6-2z"/></symbol>
  <symbol id="ic-handshake" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12l4-4 4 2 4-2 4 4"/><path d="M10 10l-3 4 2 2 2-2 2 2 4-4"/></symbol>
  <symbol id="ic-li" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M7.5 10v6.5M7.5 7.2v.1M11.5 16.5V13c0-1.4 1-2.3 2.2-2.3 1.3 0 1.8 1 1.8 2.4v3.4" stroke-linecap="round"/></symbol>
  <symbol id="ic-ig" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1"/></symbol>
  <symbol id="ic-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></symbol>
  <symbol id="ic-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z"/></symbol>
  <symbol id="ic-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M4 19h16"/></symbol>

  <!-- center icon: sunglasses made of mini growth-bars -->
  <symbol id="ic-pitbull-mark" viewBox="0 0 100 100">
    <g fill="currentColor">
      <rect x="17" y="40" width="30" height="22" rx="9"/>
      <rect x="53" y="40" width="30" height="22" rx="9"/>
      <rect x="45" y="47" width="10" height="6" rx="2"/>
      <path d="M14 44 L6 38" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
      <path d="M86 44 L94 38" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
    </g>
    <g fill="#fff">
      <rect x="23" y="51" width="4" height="7"/>
      <rect x="29" y="47" width="4" height="11"/>
      <rect x="35" y="44" width="4" height="14"/>
      <rect x="59" y="51" width="4" height="7"/>
      <rect x="65" y="47" width="4" height="11"/>
      <rect x="71" y="44" width="4" height="14"/>
    </g>
  </symbol>
</svg>

<!-- ============ NAV ============ -->
<header class="nav">
  <div class="nav-inner">
    <a class="brand" href="#top">
      <svg class="brand-icon" viewBox="0 0 100 100" style="color:var(--blue)"><use href="#ic-pitbull-mark"/></svg>
      <span class="brand-word"><b>PITBULL</b><span>ÎN&nbsp;FINANȚE</span></span>
    </a>
    <nav><ul class="nav-links">
      <li><a href="#despre">Despre</a></li>
      <li><a href="#servicii">Servicii</a></li>
      <li><a href="#proces">Cum lucrăm</a></li>
      <li><a href="#testimoniale">Testimoniale</a></li>
      <li><a href="#ghid">Ghid gratuit</a></li>
      <li><a href="#faq">FAQ</a></li>
    </ul></nav>
    <div class="nav-right">
      <div class="social-mini">
        <a href="https://ro.linkedin.com/in/catalin-ionut-demsa-577390217" target="_blank" rel="noopener" aria-label="LinkedIn"><svg><use href="#ic-li"/></svg></a>
        <a href="https://www.instagram.com/demsacatalin/" target="_blank" rel="noopener" aria-label="Instagram"><svg><use href="#ic-ig"/></svg></a>
      </div>
      <a href="#contact" class="btn btn-primary btn-sm">Programează un call</a>
    </div>
    <button class="burger" id="burgerBtn" aria-label="Meniu"><span></span><span></span><span></span></button>
  </div>
  <div class="mobile-menu" id="mobileMenu">
    <a href="#despre">Despre</a>
    <a href="#servicii">Servicii</a>
    <a href="#proces">Cum lucrăm</a>
    <a href="#testimoniale">Testimoniale</a>
    <a href="#ghid">Ghid gratuit</a>
    <a href="#faq">FAQ</a>
    <a href="#contact" style="color:var(--blue);">Programează un call →</a>
  </div>
</header>

<!-- ============ HERO ============ -->
<section class="hero" id="top">
  <div class="wrap hero-grid">
    <div>
      <span class="eyebrow hero-eyebrow">Consultanță financiară independentă · România</span>
      <h1 style="margin-top:18px;">Mușc din dobânzi.<br>Apăr <span class="hl">economiile</span> tale.</h1>
      <p class="lead">Sunt Cătălin Demsa. Lucrez pentru finanțele tale ca un pitbull: hotărât, loial clientului și imposibil de oprit până găsesc cea mai bună soluție — la credite, economii, asigurări și pensie privată.</p>
      <div class="hero-ctas">
        <a href="#contact" class="btn btn-primary">Consultație gratuită, 20 min</a>
        <a href="#ghid" class="btn btn-ghost">Descarcă ghidul gratuit ↓</a>
      </div>
      <div class="hero-trust">FĂRĂ COSTURI ASCUNSE · FĂRĂ PRESIUNE · DOAR SOLUȚII CARE AU SENS</div>
    </div>
    <div class="hero-art">
      <div class="hero-frame">
        <svg viewBox="0 0 100 100" style="color:rgba(255,255,255,.55)"><use href="#ic-pitbull-mark"/></svg>
      </div>
      <svg class="hero-badge-float" viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="92" fill="var(--blue)"/>
        <circle cx="100" cy="100" r="92" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="2 6"/>
        <path id="arcTop1" d="M 30 100 A 70 70 0 0 1 170 100" fill="none"/>
        <path id="arcBot1" d="M 170 110 A 70 70 0 0 1 30 110" fill="none"/>
        <text font-family="Space Mono, monospace" font-size="11" letter-spacing="2.5" fill="#fff">
          <textPath href="#arcTop1" startOffset="50%" text-anchor="middle">PITBULL ÎN FINANȚE</textPath>
        </text>
        <text font-family="Space Mono, monospace" font-size="9" letter-spacing="2" fill="rgba(255,255,255,.8)">
          <textPath href="#arcBot1" startOffset="50%" text-anchor="middle">CONSULTANȚĂ INDEPENDENTĂ</textPath>
        </text>
        <g transform="translate(58,58) scale(0.84)" style="color:#fff"><use href="#ic-pitbull-mark"/></g>
      </svg>
    </div>
  </div>
</section>

<!-- ============ STATS ============ -->
<div class="wrap stats-wrap">
  <!-- Notă pentru Cătălin: cifrele de mai jos sunt orientative — actualizează-le cu rezultatele tale reale înainte de publicare -->
  <div class="stats-card">
    <div class="stat"><b class="counter" data-target="10" data-suffix="+">0</b><span>Ani în consultanță financiară</span></div>
    <div class="stat"><b class="counter" data-target="500" data-suffix="+">0</b><span>Clienți ajutați</span></div>
    <div class="stat"><b class="counter" data-target="3.2" data-decimals="1" data-suffix=" Mil. Lei">0</b><span>Economisiți clienților, estimat*</span></div>
    <div class="stat"><b class="counter" data-target="4.9" data-decimals="1" data-suffix="/5">0</b><span>Rating mediu clienți</span></div>
  </div>
  <div class="stats-foot">*cifre exemplu — înlocuiește cu datele tale reale</div>
</div>

<!-- ============ ABOUT ============ -->
<section class="section" id="despre">
  <div class="wrap about-grid">
    <div>
      <span class="eyebrow">Despre Cătălin</span>
      <h2>De ce<br>"Pitbull"?</h2>
      <div class="values">
        <div class="value">
          <div class="value-icon"><svg><use href="#ic-compass"/></svg></div>
          <div><h4>Independent</h4><p>Nu sunt legat de o singură bancă sau asigurător — compar piața ca să găsesc ce ți se potrivește ție.</p></div>
        </div>
        <div class="value">
          <div class="value-icon"><svg><use href="#ic-shield"/></svg></div>
          <div><h4>Onest, fără jargon</h4><p>Îți explic exact ce semnezi și de ce, în cuvinte pe care le înțelegi.</p></div>
        </div>
        <div class="value">
          <div class="value-icon"><svg><use href="#ic-handshake"/></svg></div>
          <div><h4>Implicat pe termen lung</h4><p>Rămân alături de tine după ce planul e pus în mișcare, nu doar la semnătură.</p></div>
        </div>
      </div>
      <div class="about-social">
        <a href="https://ro.linkedin.com/in/catalin-ionut-demsa-577390217" target="_blank" rel="noopener" class="btn btn-outline btn-sm">Conectează-te pe LinkedIn</a>
        <a href="https://www.instagram.com/demsacatalin/" target="_blank" rel="noopener" class="btn btn-outline btn-sm">Urmărește pe Instagram</a>
      </div>
    </div>
    <div class="about-copy">
      <p>De fiecare dată când cineva îl întâlnește pe Cătălin Demsa, reacția e aceeași: <strong>"Stai puțin... semeni cu Pitbull!"</strong> Nu vorbim despre patrupede — ci despre energia lui Mr. Worldwide: prezență puternică, încredere și o atitudine de "nu renunț până nu rezolv". Diferența? Cătălin nu umple stadioane, ci portofele.</p>
      <p>De ani buni, Cătălin lucrează cu oameni și familii din România care vor să-și pună finanțele în ordine: <strong>credite refinanțate la dobânzi mai mici</strong>, <strong>economii puse să muncească</strong> prin investiții potrivite profilului lor, <strong>protecție</strong> prin asigurări de viață și sănătate, și un <strong>plan clar pentru pensia privată</strong>.</p>
      <p>Stilul lui? Direct, fără presiune de vânzare, dar perseverent ca un... ei bine, știi tu. Dacă există o ofertă mai bună pe piață pentru tine, o găsește.</p>
      <div class="pullquote">
        "Cea mai bună dobândă din viață ți-o dă educația financiară. Cel mai mare risc e să nu-ți asumi niciunul."
        <cite>— Cătălin Demsa</cite>
      </div>
    </div>
  </div>
</section>

<!-- ============ SERVICII / SHOP ============ -->
<section class="section" id="servicii" style="background:var(--white);">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">Servicii</span>
      <h2>Alege pachetul potrivit pentru tine</h2>
      <p>De la primul sfat gratuit, până la planul financiar complet — fiecare pachet pornește de la situația ta reală, nu de la un șablon.</p>
    </div>

    <div class="services-grid">
      <div class="product-card">
        <div class="product-top">
          <div class="product-icon"><svg><use href="#ic-compass"/></svg></div>
          <span class="price-tag">Gratuit · 30 min</span>
        </div>
        <h3>Consultație inițială</h3>
        <p class="desc">Facem un audit rapid al situației tale financiare și stabilim împreună direcția potrivită.</p>
        <a href="#contact" class="btn btn-outline btn-block" data-package="Consultație inițială (gratuită)">Programează gratuit</a>
      </div>

      <div class="product-card">
        <div class="product-top">
          <div class="product-icon"><svg><use href="#ic-house"/></svg></div>
          <span class="price-tag">Ofertă personalizată</span>
        </div>
        <h3>Refinanțare &amp; optimizare credite</h3>
        <p class="desc">Analizăm creditele active (mai ales cele imobiliare cu dobândă variabilă) și căutăm cea mai bună variantă de pe piață.</p>
        <a href="#contact" class="btn btn-outline btn-block" data-package="Refinanțare &amp; optimizare credite">Cere ofertă</a>
      </div>

      <div class="product-card">
        <div class="product-top">
          <div class="product-icon"><svg><use href="#ic-chart"/></svg></div>
          <span class="price-tag">Plan personalizat</span>
        </div>
        <h3>Economii &amp; investiții</h3>
        <p class="desc">Punem banii puși deoparte să lucreze, potrivit orizontului tău de timp și toleranței la risc.</p>
        <a href="#contact" class="btn btn-outline btn-block" data-package="Economii &amp; investiții">Vreau un plan</a>
      </div>

      <div class="product-card">
        <div class="product-top">
          <div class="product-icon"><svg><use href="#ic-shield"/></svg></div>
          <span class="price-tag">De la situația ta</span>
        </div>
        <h3>Protecție financiară</h3>
        <p class="desc">Asigurări de viață și sănătate pentru tine și familia ta, pentru liniște dacă viața își schimbă planurile.</p>
        <a href="#contact" class="btn btn-outline btn-block" data-package="Protecție financiară (asigurări)">Vreau protecție</a>
      </div>

      <div class="product-card">
        <div class="product-top">
          <div class="product-icon"><svg><use href="#ic-coins"/></svg></div>
          <span class="price-tag">Pilon 3</span>
        </div>
        <h3>Pensie privată</h3>
        <p class="desc">Construim un plan de pensie facultativă care completează pensia de stat, cu beneficii fiscale pentru tine.</p>
        <a href="#contact" class="btn btn-outline btn-block" data-package="Pensie privată (Pilon 3)">Aflu mai multe</a>
      </div>

      <div class="product-card">
        <div class="product-top">
          <div class="product-icon"><svg><use href="#ic-book"/></svg></div>
          <span class="price-tag">Digital · Gratuit</span>
        </div>
        <h3>Ghid educație financiară</h3>
        <p class="desc">Un ghid descărcabil cu pașii esențiali pentru control financiar — primul pas, fără programare.</p>
        <a href="#ghid" class="btn btn-outline btn-block">Descarcă ghidul</a>
      </div>
    </div>
  </div>
</section>

<!-- ============ PROCES ============ -->
<section class="section process" id="proces">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">Cum lucrăm</span>
      <h2>Trei pași, fără bătăi de cap</h2>
    </div>
    <div class="process-grid">
      <div class="step">
        <div class="num">01</div>
        <h3>Programezi un call gratuit</h3>
        <p>15-30 de minute, online sau telefonic — vorbim despre situația ta, fără obligații.</p>
      </div>
      <div class="step">
        <div class="num">02</div>
        <h3>Primești un plan clar</h3>
        <p>Fără jargon bancar. Opțiuni explicate simplu, cu avantaje și riscuri pentru fiecare.</p>
      </div>
      <div class="step">
        <div class="num">03</div>
        <h3>Punem planul în mișcare</h3>
        <p>Rămân alături de tine pe tot parcursul — de la semnătură, până la rezultate.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ TESTIMONIALE ============ -->
<section class="section" id="testimoniale">
  <div class="wrap">
    <div class="testi-head">
      <div class="section-head">
        <span class="eyebrow">Testimoniale</span>
        <h2>Ce spun clienții</h2>
      </div>
      <svg class="stamp" viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="92" fill="var(--navy)"/>
        <path id="arcTop2" d="M 30 100 A 70 70 0 0 1 170 100" fill="none"/>
        <path id="arcBot2" d="M 170 110 A 70 70 0 0 1 30 110" fill="none"/>
        <text font-family="Space Mono, monospace" font-size="10.5" letter-spacing="2" fill="#fff">
          <textPath href="#arcTop2" startOffset="50%" text-anchor="middle">APROBAT DE PITBULL</textPath>
        </text>
        <text font-family="Space Mono, monospace" font-size="9" letter-spacing="2" fill="rgba(255,255,255,.7)">
          <textPath href="#arcBot2" startOffset="50%" text-anchor="middle">★ ★ ★ ★ ★</textPath>
        </text>
        <g transform="translate(58,58) scale(0.84)" style="color:var(--blue-2)"><use href="#ic-pitbull-mark"/></g>
      </svg>
    </div>

    <div class="testi-grid">
      <div class="testi-card">
        <div class="stars">★★★★★</div>
        <p class="quote">"Am refinanțat creditul casei și acum economisim câteva sute de lei pe lună. Cătălin a explicat tot pe înțelesul meu, fără presiune."</p>
        <div class="testi-who"><div class="avatar-dot">A</div><div><b>Andreea</b><span>București</span></div></div>
      </div>
      <div class="testi-card">
        <div class="stars">★★★★★</div>
        <p class="quote">"Am pornit cu un plan de economii pentru copii și acum, în sfârșit, înțeleg unde îmi duc banii în fiecare lună."</p>
        <div class="testi-who"><div class="avatar-dot">M</div><div><b>Mihai</b><span>Cluj-Napoca</span></div></div>
      </div>
      <div class="testi-card">
        <div class="stars">★★★★★</div>
        <p class="quote">"Energia lui e contagioasă — m-a făcut, în sfârșit, să iau finanțele în serios, fără să mă sperie cu termeni complicați."</p>
        <div class="testi-who"><div class="avatar-dot">I</div><div><b>Ioana</b><span>Timișoara</span></div></div>
      </div>
    </div>
    <div class="testi-note">* Testimoniale exemplu, pentru machetă — înlocuiește-le cu recenzii reale ale clienților tăi.</div>
  </div>
</section>

<!-- ============ LEAD MAGNET ============ -->
<section class="section" id="ghid" style="background:var(--ice); padding-top:0;">
  <div class="wrap">
    <div class="magnet">
      <div>
        <span class="eyebrow" style="color:var(--blue-2);">Gratuit</span>
        <h2 style="margin-top:14px;">5 greșeli financiare care te țin pe loc</h2>
        <p>Descarcă ghidul gratuit și află ce schimbări mici, făcute acum, îți pot aduce mii de lei economisiți în timp. PDF, 4 pagini, citire de 5 minute.</p>

        <a class="btn btn-primary" id="pdfDownloadBtn"
           href="ghid-5-greseli-financiare-pitbull-in-finante.pdf"
           download="5-Greseli-Financiare-Pitbull-in-Finante.pdf"
           style="margin-top:26px;">
          <svg style="width:18px;height:18px;stroke:#fff;fill:none;"><use href="#ic-download"/></svg>
          <span class="btn-label">Descarcă ghidul PDF acum</span>
        </a>

        <div class="lead-divider">SAU PRIMEȘTE-L PE EMAIL</div>
        <form class="magnet-form" id="magnetForm" name="ghid-gratuit" data-netlify="true" netlify-honeypot="bot-field" method="POST">
          <input type="hidden" name="form-name" value="ghid-gratuit">
          <p style="position:absolute; left:-9999px;"><label>Nu completa: <input name="bot-field"></label></p>
          <input type="email" name="email" required placeholder="Adresa ta de email" aria-label="Email" id="magnetEmail">
          <button type="submit" class="btn btn-primary" id="magnetBtn">
            <span class="spin"></span><span class="btn-label">Trimite-mi-l pe email</span>
          </button>
        </form>
        <div class="form-status" id="magnetStatus"></div>
        <div class="magnet-fine">Zero spam. Doar informații utile, ca de la un prieten care se pricepe la finanțe.</div>
      </div>
      <div class="magnet-art">
        <svg viewBox="0 0 100 100" style="color:var(--blue-2)"><use href="#ic-pitbull-mark"/></svg>
      </div>
    </div>
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="section" id="faq">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">Întrebări frecvente</span>
      <h2>Tot ce vrei să știi</h2>
    </div>
    <div class="faq-list">
      <details open>
        <summary>Cât costă o consultație inițială? <span class="plus"></span></summary>
        <p>Prima discuție este gratuită. Analizăm împreună situația ta și vezi clar dacă lucrăm bine împreună, fără nicio obligație.</p>
      </details>
      <details>
        <summary>Lucrezi doar cu o singură bancă sau asigurător? <span class="plus"></span></summary>
        <p>Nu. Sunt consultant independent și compar ofertele mai multor instituții, ca să găsesc soluția potrivită ție — nu obiectivelor unei singure companii.</p>
      </details>
      <details>
        <summary>Ce este Pilonul 3 (pensia privată facultativă)? <span class="plus"></span></summary>
        <p>Este un cont personal de economisire pe termen lung, gândit să completeze pensia de stat, cu beneficii fiscale pentru tine.</p>
      </details>
      <details>
        <summary>Lucrezi și online, sau doar în orașul tău? <span class="plus"></span></summary>
        <p>Majoritatea consultațiilor se desfășoară online — video sau telefonic — așa că putem colabora oriunde te-ai afla.</p>
      </details>
      <details>
        <summary>Cum te contactez? <span class="plus"></span></summary>
        <p>Prin formularul de mai jos, pe LinkedIn, pe Instagram sau direct programând un call din butonul din meniu.</p>
      </details>
    </div>
  </div>
</section>

<!-- ============ FINAL CTA / CONTACT ============ -->
<section class="final-cta" id="contact">
  <div class="wrap">
    <span class="eyebrow">Contact</span>
    <h2>Gata să pui finanțele în formă?</h2>
    <p>Hai să vorbim 20 de minute. Fără costuri, fără obligații — doar un plan clar pentru pasul următor.</p>

    <div class="contact-wrap">
      <form class="contact-form" id="contactForm" name="contact" data-netlify="true" netlify-honeypot="bot-field-2" method="POST">
        <input type="hidden" name="form-name" value="contact">
        <p style="position:absolute; left:-9999px;"><label>Nu completa: <input name="bot-field-2"></label></p>
        <div class="form-row">
          <div class="field">
            <label for="cf-name">Nume</label>
            <input type="text" id="cf-name" name="name" required placeholder="Numele tău">
          </div>
          <div class="field">
            <label for="cf-email">Email</label>
            <input type="email" id="cf-email" name="email" required placeholder="adresa@email.com">
          </div>
        </div>
        <div class="field">
          <label for="cf-phone">Telefon (opțional)</label>
          <input type="tel" id="cf-phone" name="phone" placeholder="07xx xxx xxx">
        </div>
        <div class="field">
          <label for="cf-package">Ce te interesează?</label>
          <select id="cf-package" name="package">
            <option value="">Alege un pachet (opțional)</option>
            <option value="Consultație inițială (gratuită)">Consultație inițială (gratuită)</option>
            <option value="Refinanțare &amp; optimizare credite">Refinanțare &amp; optimizare credite</option>
            <option value="Economii &amp; investiții">Economii &amp; investiții</option>
            <option value="Protecție financiară (asigurări)">Protecție financiară (asigurări)</option>
            <option value="Pensie privată (Pilon 3)">Pensie privată (Pilon 3)</option>
            <option value="Altceva / nu sunt sigur">Altceva / nu sunt sigur</option>
          </select>
        </div>
        <div class="field">
          <label for="cf-message">Mesaj</label>
          <textarea id="cf-message" name="message" rows="4" required placeholder="Spune-mi pe scurt despre situația ta financiară sau ce te interesează..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary btn-block" id="contactBtn">
          <span class="spin"></span><span class="btn-label">Trimite mesajul</span>
        </button>
        <div class="form-status" id="contactStatus"></div>
        <div class="form-fine">Răspund de obicei în maximum 1-2 zile lucrătoare.</div>
      </form>

      <div class="contact-side">
        <h4>Contact direct</h4>
        <a class="row js-email-link" href="mailto:contact@pitbullinfinante.ro">
          <svg><use href="#ic-mail"/></svg><span class="js-email-text">contact@pitbullinfinante.ro</span>
        </a>
        <a class="row js-phone-link" href="tel:+40700000000">
          <svg><use href="#ic-phone"/></svg><span class="js-phone-text">+40 700 000 000</span>
        </a>
        <div class="divider"></div>
        <a class="row" href="https://ro.linkedin.com/in/catalin-ionut-demsa-577390217" target="_blank" rel="noopener">
          <svg><use href="#ic-li"/></svg><span>LinkedIn</span>
        </a>
        <a class="row" href="https://www.instagram.com/demsacatalin/" target="_blank" rel="noopener">
          <svg><use href="#ic-ig"/></svg><span>Instagram</span>
        </a>
        <div class="divider"></div>
        <span style="font-size:13px; color:rgba(255,255,255,.55); line-height:1.6;">România · consultații disponibile online, oriunde te-ai afla.</span>
      </div>
    </div>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="wrap">
    <div class="footer-grid">
      <div class="footer-brand">
        <a class="brand" href="#top">
          <svg class="brand-icon" viewBox="0 0 100 100" style="color:var(--blue-2)"><use href="#ic-pitbull-mark"/></svg>
          <span class="brand-word"><b>PITBULL</b><span style="color:var(--blue-2)">ÎN&nbsp;FINANȚE</span></span>
        </a>
        <p>Cătălin Demsa — consultant financiar independent. Credite, economii, investiții, protecție și pensie privată, cu energie de Mr. Worldwide.</p>
        <div class="footer-social">
          <a href="https://ro.linkedin.com/in/catalin-ionut-demsa-577390217" target="_blank" rel="noopener" aria-label="LinkedIn"><svg><use href="#ic-li"/></svg></a>
          <a href="https://www.instagram.com/demsacatalin/" target="_blank" rel="noopener" aria-label="Instagram"><svg><use href="#ic-ig"/></svg></a>
        </div>
      </div>
      <div class="footer-col">
        <h5>Navigare</h5>
        <ul>
          <li><a href="#despre">Despre</a></li>
          <li><a href="#servicii">Servicii</a></li>
          <li><a href="#proces">Cum lucrăm</a></li>
          <li><a href="#testimoniale">Testimoniale</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Servicii</h5>
        <ul>
          <li><a href="#servicii">Refinanțare credite</a></li>
          <li><a href="#servicii">Economii &amp; investiții</a></li>
          <li><a href="#servicii">Asigurări</a></li>
          <li><a href="#servicii">Pensie privată</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Contact</h5>
        <ul>
          <li><a class="js-email-link" href="mailto:contact@pitbullinfinante.ro"><span class="js-email-text">contact@pitbullinfinante.ro</span></a></li>
          <li><a class="js-phone-link" href="tel:+40700000000"><span class="js-phone-text">+40 700 000 000</span></a></li>
          <li><span style="font-size:14px; color:rgba(255,255,255,.55);">România · disponibil online</span></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="year"></span> Pitbull în Finanțe — Cătălin Demsa. Toate drepturile rezervate.</span>
      <span><a href="admin.html" style="color:rgba(255,255,255,.45);">Admin</a> · Formulare funcționale · vezi CONFIG.formBackend în cod</span>
    </div>
    <div class="footer-disclaimer">
      Notă tehnică: formularele trimit acum mesajul prin email (mailto) implicit — funcționează oriunde e găzduit site-ul, fără cont. Dacă site-ul ajunge pe Netlify, schimbă în cod <code>CONFIG.formBackend</code> din "mailto" în "netlify" — formularele vor trimite automat, fără să se deschidă emailul, iar mesajele apar în Netlify &gt; Forms. Alternativ, "web3forms" cu o cheie gratuită de la web3forms.com funcționează pe orice alt hosting. Înlocuiește și emailul, telefonul, cifrele, testimonialele și prețurile exemplu cu informațiile tale reale, plus datele de autorizare/conformitate cerute pentru servicii de consultanță financiară în România.
    </div>
  </div>
</footer>

<script>
  document.getElementById('year').textContent = new Date().getFullYear();

  /* ======================================================
     CONFIG — editează O SINGURĂ DATĂ aici, se aplică peste tot
     ====================================================== */
  const CONFIG = {
    email: "contact@pitbullinfinante.ro",   // <-- pune adresa reală a lui Cătălin
    phone: "+40 700 000 000",               // <-- numărul real, cum vrei să apară
    phoneHref: "+40700000000",              // <-- același număr, fără spații (pentru link tel:)

    // Cum trimit formularele mesajul? Alege UNA dintre variante:
    // "netlify"   -> ZERO setup dacă găzduiești site-ul pe Netlify (vezi instrucțiunile primite în chat).
    //                Formularele apar automat în Netlify > Site > Forms, cu notificare pe email.
    // "web3forms" -> pune o cheie gratuită de la https://web3forms.com mai jos, la web3formsKey.
    // "mailto"    -> nu necesită nimic, dar deschide aplicația de email a vizitatorului (funcționează oriunde).
    formBackend: "mailto",
    web3formsKey: ""
  };

  function applyConfig(){
    document.querySelectorAll('.js-email-text').forEach(el => el.textContent = CONFIG.email);
    document.querySelectorAll('.js-email-link').forEach(el => el.href = 'mailto:' + CONFIG.email);
    document.querySelectorAll('.js-phone-text').forEach(el => el.textContent = CONFIG.phone);
    document.querySelectorAll('.js-phone-link').forEach(el => el.href = 'tel:' + CONFIG.phoneHref);
  }

  /* ======================================================
     CONTENT.JSON — conținut editabil din panoul /admin.html
     Dacă fișierul lipsește sau nu poate fi citit (ex: deschis
     local cu dublu-click), site-ul continuă cu valorile de mai sus/din HTML.
     ====================================================== */
  async function loadContent(){
    try {
      const res = await fetch('content.json', { cache: 'no-store' });
      if (!res.ok) return;
      const data = await res.json();

      if (data.contact) {
        if (data.contact.email) CONFIG.email = data.contact.email;
        if (data.contact.phone) {
          CONFIG.phone = data.contact.phone;
          CONFIG.phoneHref = data.contact.phone.replace(/[^\d+]/g, '');
        }
      }

      if (Array.isArray(data.stats)) {
        document.querySelectorAll('.stats-card .stat').forEach((el, i) => {
          const s = data.stats[i];
          if (!s) return;
          const counter = el.querySelector('.counter');
          const label = el.querySelector('span');
          if (counter) {
            counter.dataset.target = s.target;
            counter.dataset.suffix = s.suffix || '';
            counter.dataset.decimals = (String(s.target).includes('.')) ? '1' : '0';
          }
          if (label) label.textContent = s.label || label.textContent;
        });
      }

      if (Array.isArray(data.testimonials)) {
        document.querySelectorAll('.testi-card').forEach((el, i) => {
          const t = data.testimonials[i];
          if (!t) return;
          const quote = el.querySelector('.quote');
          const name = el.querySelector('.testi-who b');
          const city = el.querySelector('.testi-who span');
          const avatar = el.querySelector('.avatar-dot');
          if (quote) quote.textContent = `"${t.quote}"`;
          if (name) name.textContent = t.name;
          if (city) city.textContent = t.city;
          if (avatar) avatar.textContent = (t.name || '?').trim().charAt(0).toUpperCase();
        });
      }

      if (Array.isArray(data.prices)) {
        document.querySelectorAll('.services-grid .price-tag').forEach((el, i) => {
          if (data.prices[i]) el.textContent = data.prices[i];
        });
      }
    } catch (err) {
      // content.json indisponibil (ex: deschis local) — site-ul rămâne cu valorile din HTML
    }
  }

  (async () => {
    await loadContent();
    applyConfig();
  })();

  // Mobile menu
  const burger = document.getElementById('burgerBtn');
  const mobileMenu = document.getElementById('mobileMenu');
  burger.addEventListener('click', () => mobileMenu.classList.toggle('open'));
  mobileMenu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mobileMenu.classList.remove('open')));

  /* ======================================================
     PACHETE — click pe un pachet duce la formular ȘI îl pre-completează
     ====================================================== */
  const packageSelect = document.getElementById('cf-package');
  function selectPackage(name){
    if (!packageSelect || !name) return;
    const match = Array.from(packageSelect.options).find(o => o.value === name);
    if (match) packageSelect.value = name;
    packageSelect.classList.remove('highlight');
    void packageSelect.offsetWidth; // restart animație dacă se dă click de mai multe ori
    packageSelect.classList.add('highlight');
    setTimeout(() => {
      const nameField = document.getElementById('cf-name');
      if (nameField && window.innerWidth > 760) nameField.focus({ preventScroll: true });
    }, 550);
  }
  document.querySelectorAll('[data-package]').forEach(el => {
    el.addEventListener('click', () => selectPackage(el.dataset.package));
  });

  /* ======================================================
     FORMS — trimit prin Web3Forms dacă e setată o cheie,
     altfel deschid emailul cu mesajul precompletat (mereu funcțional, fără cont)
     ====================================================== */
  function setLoading(btn, isLoading){
    btn.classList.toggle('loading', isLoading);
    btn.disabled = isLoading;
  }
  function showStatus(el, message, type){
    el.textContent = message;
    el.className = 'form-status show ' + type;
  }
  function openMailto(subject, body){
    window.location.href = `mailto:${CONFIG.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  }

  function encodeFormData(data){
    return Object.keys(data).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(data[k])).join('&');
  }

  async function submitForm({form, fields, subject, mailtoBody, btn, statusEl, onSuccess}){
    setLoading(btn, true);
    statusEl.className = 'form-status';

    if (CONFIG.formBackend === 'netlify') {
      try {
        const formName = form.querySelector('input[name="form-name"]').value;
        const res = await fetch('/', {
          method: 'POST',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          body: encodeFormData({ 'form-name': formName, ...fields })
        });
        if (res.ok) {
          showStatus(statusEl, '✓ Mulțumesc! Am primit mesajul.', 'success');
          onSuccess();
          setLoading(btn, false);
          return;
        }
        throw new Error('netlify_failed');
      } catch (err) {
        // cădem pe varianta de mai jos
      }
    }

    if (CONFIG.formBackend === 'web3forms' && CONFIG.web3formsKey) {
      try {
        const res = await fetch('https://api.web3forms.com/submit', {
          method: 'POST',
          headers: {'Content-Type':'application/json', Accept:'application/json'},
          body: JSON.stringify({ access_key: CONFIG.web3formsKey, subject, ...fields })
        });
        const data = await res.json();
        if (data.success) {
          showStatus(statusEl, '✓ Mulțumesc! Mesajul a fost trimis.', 'success');
          onSuccess();
          setLoading(btn, false);
          return;
        }
        throw new Error('web3forms_failed');
      } catch (err) {
        // cădem pe mailto mai jos, ca utilizatorul să nu rămână blocat
      }
    }

    openMailto(subject, mailtoBody);
    showStatus(statusEl, '✓ Ți-am deschis aplicația de email cu mesajul completat — apasă „Trimite” acolo.', 'success');
    setLoading(btn, false);
  }

  // Ghid gratuit — trimite-mi-l pe email
  const magnetForm = document.getElementById('magnetForm');
  const magnetBtn = document.getElementById('magnetBtn');
  const magnetStatus = document.getElementById('magnetStatus');
  magnetForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = document.getElementById('magnetEmail').value.trim();
    if (!email) return;
    submitForm({
      form: magnetForm,
      fields: { email, message: 'Cerere ghid gratuit: 5 Greseli Financiare care te tin pe loc' },
      subject: 'Cerere ghid gratuit — Pitbull în Finanțe',
      mailtoBody: `Vreau ghidul gratuit "5 Greșeli Financiare Care Te Țin Pe Loc".\n\nEmail de contact: ${email}`,
      btn: magnetBtn,
      statusEl: magnetStatus,
      onSuccess: () => magnetForm.reset()
    });
  });

  // Formular de contact
  const contactForm = document.getElementById('contactForm');
  const contactBtn = document.getElementById('contactBtn');
  const contactStatus = document.getElementById('contactStatus');
  contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const name = document.getElementById('cf-name').value.trim();
    const email = document.getElementById('cf-email').value.trim();
    const phone = document.getElementById('cf-phone').value.trim();
    const pkg = document.getElementById('cf-package').value.trim();
    const message = document.getElementById('cf-message').value.trim();
    const subjectPkg = pkg ? ` — ${pkg}` : '';
    submitForm({
      form: contactForm,
      fields: { name, email, phone, package: pkg || '-', message },
      subject: `Mesaj nou de la ${name}${subjectPkg} — site Pitbull în Finanțe`,
      mailtoBody: `Nume: ${name}\nEmail: ${email}\nTelefon: ${phone || '-'}\nPachet de interes: ${pkg || '-'}\n\nMesaj:\n${message}`,
      btn: contactBtn,
      statusEl: contactStatus,
      onSuccess: () => contactForm.reset()
    });
  });

  // Counter animation on scroll
  const counters = document.querySelectorAll('.counter');
  const animate = (el) => {
    const target = parseFloat(el.dataset.target);
    const decimals = parseInt(el.dataset.decimals || '0');
    const suffix = el.dataset.suffix || '';
    const dur = 1200;
    const start = performance.now();
    function tick(now){
      const p = Math.min((now - start) / dur, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      const val = target * eased;
      el.textContent = val.toFixed(decimals) + suffix;
      if (p < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  };
  const io = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) { animate(entry.target); io.unobserve(entry.target); }
    });
  }, { threshold: .5 });
  counters.forEach(c => io.observe(c));
</script>
</body>
</html>