:root{
      --brand-1:#FF8FB1; /* málnarózsaszín */
      --brand-2:#7BDFF2; /* világoskék */
      --brand-3:#B2F7EF; /* menta */
      --ink:#1f2937;      /* szöveg */
/*      --muted:#6b7280;    /* halvány szöveg */
      --muted:#1f2937;    /* halvány szöveg */
      --bg:#fffafc;       /* meleg fehér */
      --card:#ffffff;     /* kártya */
      --ring:#ffdbe7;     /* fókusz */
      --ok:#22c55e;       /* zöld pipa */
    }
    *{box-sizing:border-box}
    html,body{margin:0;}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6}
    .container{width:min(1120px, 92vw); margin-inline:auto}
    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:rgba(255,250,252,.8); border-bottom:1px solid #ffe5ef}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
    .logo{display:flex; align-items:center; gap:12px; text-decoration:none}
    .logo img{width:44px; height:44px; object-fit:contain}
    .brand{font-family:"Baloo 2", system-ui; font-weight:800; font-size:1.35rem; color:#E11D48; letter-spacing:.3px}
    nav a{margin-left:18px; text-decoration:none; color:var(--ink); font-weight:600}
    nav a:hover{color:#E11D48}
    .cta{background:#E11D48; color:white; padding:10px 16px; border-radius:14px; box-shadow:0 6px 20px rgba(225,29,72,.25); border:none; font-weight:700}
    .cta:focus{outline:3px solid var(--ring)}

    /* HERO */
    .hero{position:relative; padding:56px 0 24px}
    .hero .container{display:grid; grid-template-columns:1.08fr .92fr; gap:32px}
    .badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
    .badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:linear-gradient(135deg, var(--brand-2), var(--brand-3)); font-weight:700}
    h1{font-family:"Baloo 2"; font-size:clamp(32px, 3.8vw, 56px); line-height:1.15; margin:10px 0 12px}
    .lead{font-size:1.1rem; color:var(--ink)}
    .hero-cute{position:relative; padding:24px; border-radius:28px; background: conic-gradient(from 180deg at 50% 50%, #fff 0deg, #fff6fa 90deg, #f0fbff 180deg, #fff 360deg); box-shadow:0 12px 40px rgba(0,0,0,.06)}
    .hero-list{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 22px}
    .hero-list li{display:flex; gap:10px; align-items:flex-start}
    .check{width:18px; height:18px; border-radius:6px; background:var(--ok); margin-top:3px}

    .illus{position:relative; min-height:360px; border-radius:32px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.06); background-image:url('amisuli_bg_80.jpg'); background-size:cover; background-position:center;}
    .illus::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));}
    .illus .blob{position:absolute; border-radius:50%; filter:blur(20px); opacity:.8}
    @media (max-width: 860px){
      .illus{ background-image:url('amisuli_bg4_80.jpg'); min-height:280px; background-position:center }
    }
        
    .blob.a{width:200px;height:200px;background:#ffdbe7; left:-30px; top:30px}
    .blob.b{width:180px;height:180px;background:#b3f0ff; right:-40px; top:40px}
    .blob.c{width:220px;height:220px;background:#c8ffe9; right:30px; bottom:-40px}
    .illus .kid{position:absolute; inset:auto 0 0 0; display:grid; place-items:end center; padding:18px}
    .illus .kid img{max-width:82%;}

    /* SERVICES */
    .section{padding:48px 0}
    .section h2{font-family:"Baloo 2"; font-size:clamp(26px, 3vw, 36px); margin:0 0 14px}
    .muted{color:var(--muted)}
    .muted p{ font-size:14px}
    .muted li{font-size:14px}
    .cards{display:grid; grid-template-columns:repeat(6, 1fr); gap:18px}
    .card{grid-column: span 3; background:var(--card); border-radius:20px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.05); border:1px solid #ffe5ef}
    .card.small{grid-column: span 2}
    .card h3{margin:6px 0 4px; font-size:1.1rem}
    .pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#fff2f7; color:#be123c; font-weight:700; font-size:.85rem}
    .card ul{padding-left:18px; margin:8px 0}

    @media (max-width: 860px){
      .cards{display: block; grid-template-columns: 1fr; gap: 18px}
      .card, .card.small{grid-column: 1 !important}
    }    
    
    /* TRUST */
    .trust{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    .quote{background:#ffffff; border:1px dashed #ffd6e4; border-radius:18px; padding:18px}
    blockquote{margin:0; font-size:1rem}
    .quote small{display:block; margin-top:8px; color:var(--muted)}

    /* CTA Wide */
    .cta-wide{background:linear-gradient(135deg, #ffe5ef, #d8f7ff); border-radius:26px; padding:22px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; box-shadow:0 14px 36px rgba(0,0,0,.06)}

    /* FOOTER */
    footer{padding:36px 0 60px; color:#4b5563}
/*    .foot{display:grid; grid-template-columns:1.3fr .7fr; gap:18px} */
    .foot{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap }
    .foot .contact{flex: 1 1 420px; max-width: 680px}
    .foot form.contact{flex: 1 1 380px; max-width: 560px}    
    .contact{display:grid; gap:6px}
    .contact a{color:#111827; font-weight:700; text-decoration:none}
    .g-recaptcha{margin: 8px 0 12px; border-radius: 12px; overflow: hidden}    
    .social{display:flex; gap:12px; margin-top:10px}
    .social a{display:inline-flex; width:28px; height:28px; border-radius:8px; overflow:hidden; align-items:center; justify-content:center; transition:transform .2s; text-decoration:none}
    .social a:hover{ transform:scale(1.08); }
    .social svg{ width:18px; height:18px; }    

    /* RESPONSIVE */
    @media (max-width: 860px){
      .hero .container{grid-template-columns:1fr;}
      .hero-list{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr 1fr}
      .card, .card.small{grid-column:span 1}
      .trust{grid-template-columns:1fr}
      .cta-wide{grid-template-columns:1fr}
      nav{display:none}
    }
    /* DETAILS */
    details{margin-top:8px}
    details summary{cursor:pointer; list-style:none; font-weight:700}
    details summary::-webkit-details-marker{display:none}
    details[open]{background:#fff8fb; border-radius:12px; padding:10px; border:1px solid #ffe0ec}
    
    img.rounded { border-radius: 20px; overflow: hidden; display: block }

    .alert{ display:none; margin-top:12px; padding:12px 14px; border-radius:14px; border:1px solid #ffe0ec; background:#fff8fb; box-shadow:0 6px 20px rgba(0,0,0,.06); font-weight:600; line-height:1.4; gap:10px; align-items: center; justify-content: center; text-align: center}
    .alert svg{ width:18px; height:18px; margin-top:2px; }
    .alert--ok{border-color:rgba(34,197,94,.25); background:linear-gradient(135deg,#f6fff9,#ffffff); color:#065f46}
    .alert--error{border-color:#ffd6e4; background:linear-gradient(135deg,#fff2f7,#ffffff); color:#9f1239}
    .alert--show{ display:flex; }
    #uzenet-statusz{ scroll-margin-top: 90px; }    

    li.hand::marker{content: "👉"; font-size: 1.1em;   /* picit nagyobb lehet */}
    li.star::marker{content: "✨"; font-size: 1.1em;   /* picit nagyobb lehet */}



    /* MODAL – Bővebben teljes képernyőn */
    .modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000}
    .modal--show{display:flex}
    .modal__backdrop{position:absolute; inset:0; background:rgba(17,24,39,.6); backdrop-filter:blur(2px)}
    .modal__dialog{position:relative; width:min(920px,92vw); max-height:88vh; overflow:auto; background:#fff; border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,.25); padding:20px}
    .modal__header{display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; background:#fff; padding-bottom:8px; border-bottom:1px solid #ffe0ec; z-index:1}
    .modal__title{font-family:"Baloo 2"; font-size:1.4rem; margin:0}
    .modal__close{appearance:none; border:0; background:#fff2f7; border-radius:12px; padding:8px 10px; cursor:pointer; font-weight:700}
    .modal__content p{margin:10px 0}
    .modal__content ul{padding-left:20px; margin:10px 0}
    body.no-scroll{overflow:hidden}
    @media (max-width:860px){
        .modal__dialog{width:96vw; height:94vh; max-height:94vh; padding:16px; border-radius:20px}
    }
    .modal__headleft{display:flex; align-items:center; gap:10px}

    hr{ border: 0; height: 3px; margin: 20px 0; background: linear-gradient(90deg, transparent, var(--brand-2), var(--brand-3), transparent) }