* { box-sizing: border-box; }

body {
    margin: 0;
    font-family:  "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background: #13273D;
    color: #424242;
}

.hero {
     margin-top: 0px;
    height: 80vh ;
    background: url('https://nice-roof-hungary.hu/assets/img/slider/IMG20220907125323.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items:  center;
    justify-content:  center;
}

.overlay {
    position: absolute;
    inset:  0;
    background: rgba(0,0,0,.35);
      height: 80vh ;
     

}

.hero-content {
    position: relative;
    text-align: center;
    color: #fff;
    max-width: 800px;
}

.hero h1 {
    font-size: 3rem;
}

.cta {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 36px;
    background: #d97706;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
}

.trust-section {
    background: linear-gradient(135deg, #D1DAE5, #516B90, #060809);
    padding: 90px 20px;
}

.trust-box {
    max-width: 960px;
    margin: auto;
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border-radius: 26px;
    padding: 60px;
    box-shadow:
        0 40px 80px rgba(0,0,0,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.6);
    position: relative;
    overflow: hidden;
}

/* dísz háttérfolt */
.trust-box::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, #93c5fd, transparent 70%);
    opacity: 0.35;
}

.badge {
    display: inline-block;
    background: linear-gradient(135deg, #38bdf8, #22c55e);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: .3px;
}

.trust-box h2 {
    font-size: 40px;
    margin-bottom: 22px;
    line-height: 1.2;
    background: linear-gradient(90deg, #0f172a, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.trust-box .lead {
    font-size: 19px;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Kártyák */
.info-card,
.twist,
.decision {
    border-radius: 18px;
    padding: 26px;
    margin: 35px 0;
    position: relative;
}

.info-card {
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border-left: 6px solid #2563eb;
}

.twist {
    background: linear-gradient(135deg, #ecfeff, #f0fdf4);
    border-left: 6px solid #22c55e;
}

.decision {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border-left: 6px solid #f59e0b;
}

.info-card h3,
.twist h3,
.decision h3 {
    margin-bottom: 12px;
    font-size: 20px;
}

.info-card p,
.twist p,
.decision p {
    color: #374151;
    line-height: 1.7;
}

/* Záró érzelmi rész */
.closing {
    margin-top: 45px;
    padding-top: 30px;
    font-size: 20px;
    color: #111827;
    border-top: 1px dashed #cbd5f5;
    text-align: center;
}

/* MOBIL */
@media (max-width: 768px) {
    .trust-box {
        padding: 35px 25px;
    }

    .trust-box h2 {
        font-size: 30px;
    }

    .closing {
        font-size: 18px;
    }
}


.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
    padding: 40px;
}

.card {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
  .fancy-cards {
    background: linear-gradient(135deg, #f0fdf4, #ecfeff, #fff7ed);
    padding: 80px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.card {
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    padding: 40px 30px;
    border-radius: 26px;
    box-shadow: 0 30px 60px rgba(0,0,0,.15);
    position: relative;
    transition: all .35s ease;
    overflow: hidden;
}

/* lebegős hover */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 45px 90px rgba(0,0,0,.2);
}

/* ikon */
.card .icon {
    font-size: 42px;
    margin-bottom: 18px;
}

/* cím */
.card h3 {
    font-size: 26px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #0f172a, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* szöveg */
.card p {
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 12px;
}

.card .strong {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* lista */
.card ul {
    padding-left: 18px;
    margin: 20px 0;
}

.card ul li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* extra szöveg */
.card .note {
    margin-top: 18px;
    font-weight: 600;
    color: #065f46;
}

/* kártya stílus variációk */
.card.highlight {
    border-top: 6px solid #2563eb;
}

.card.value {
    border-top: 6px solid #f59e0b;
}

.card.heart {
    border-top: 6px solid #22c55e;
}

/* háttér dísz */
.card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(59,130,246,.15), transparent 70%);
}

/* mobil */
@media (max-width: 768px) {
    .fancy-cards {
        padding: 50px 20px;
    }

    .card {
        padding: 30px 24px;
    }

    .card h3 {
        font-size: 22px;
    }
}

.fund-section {
    background: radial-gradient(circle at top, #020617, #020617 40%, #020617);
    padding: 100px 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.fund-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(34,197,94,.15), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.15), transparent 40%);
}

.fund-box {
    max-width: 900px;
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.fund-badge {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e, #38bdf8);
    color: #020617;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

.fund-box h2 {
    font-size: 38px;
    margin-bottom: 30px;
    letter-spacing: .5px;
}

.counter-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.counter {
    font-size: 72px;
    font-weight: 900;
    background: linear-gradient(90deg, #22c55e, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(56,189,248,.35);
}

.currency {
    font-size: 28px;
    font-weight: 700;
    opacity: .85;
}

.fund-sub {
    font-size: 15px;
    opacity: .8;
    margin-bottom: 30px;
}

.fund-text {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 17px;
    line-height: 1.8;
    color: #e5e7eb;
}

.fund-text strong {
    color: #a7f3d0;
}

/* CTA */
.cta-glow {
    display: inline-block;
    padding: 16px 38px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 999px;
    color: #020617;
    background: linear-gradient(135deg, #22c55e, #38bdf8);
    text-decoration: none;
    box-shadow:
        0 0 0 rgba(34,197,94,0),
        0 0 40px rgba(56,189,248,.45);
    transition: all .3s ease;
}

.cta-glow:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 rgba(34,197,94,0),
        0 0 60px rgba(56,189,248,.7);
}

/* mobil */
@media (max-width: 768px) {
    .counter {
        font-size: 52px;
    }

    .fund-box h2 {
        font-size: 28px;
    }
}

.cta-section-hero {
    background: linear-gradient(135deg, #0f172a, #1e3a8a, #7c3aed);
    padding: 110px 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.cta-section-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(34,197,94,.15), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(251,191,36,.15), transparent 45%);
}

.cta-box {
    max-width: 900px;
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-badge {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e, #facc15);
    color: #020617;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 25px;
}

.cta-box h2 {
    font-size: 44px;
    margin-bottom: 15px;
}

.cta-lead {
    font-size: 20px;
    color: #fde68a;
    margin-bottom: 30px;
}

.cta-text {
    font-size: 17px;
    line-height: 1.8;
    max-width: 760px;
    margin: 0 auto 20px;
}

.cta-text.highlight {
    color: #a7f3d0;
    font-size: 18px;
}

.cta-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 500px;
    text-align: left;
}

.cta-list li {
    font-size: 17px;
    padding: 10px 0;
}

.cta-quote {
    background: rgba(255,255,255,0.12);
    border-left: 5px solid #facc15;
    padding: 25px;
    margin: 40px auto;
    max-width: 720px;
    font-style: italic;
}

.cta-quote p {
    font-size: 18px;
    margin-bottom: 8px;
}

.cta-quote span {
    font-size: 15px;
    opacity: .9;
}

.cta-final {
    font-size: 18px;
    margin: 35px 0;
}

.cta-btn {
    display: inline-block;
    padding: 18px 48px;
    font-size: 18px;
    font-weight: 800;
    color: #020617;
    background: linear-gradient(135deg, #22c55e, #38bdf8);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 0 40px rgba(56,189,248,.6);
    transition: all .3s ease;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 70px rgba(56,189,248,.9);
}

/* mobil */
@media (max-width: 768px) {
    .cta-box h2 {
        font-size: 32px;
    }

    .cta-lead {
        font-size: 18px;
    }
}

.timeline ul {
    list-style: none;
    padding: 0;
}

.timeline li {
    padding: 10px;
    font-weight: bold;
}

.cta-section {
    background: linear-gradient(135deg,#0899BA,#B5499E);
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}

.cta.big {
    font-size: 1.2rem;
    padding: 18px 48px;
}

footer {
    background: #111;
    color: #aaa;
    padding: 20px;
    text-align: center;
}


 .form-hero{
      background: url('/onlinefelmeres/assets/img/img_h.png') center/cover no-repeat;

    background-color:#1f2933;
    color:#fff;
    padding:80px 20px;
    text-align:center;
     border-bottom: #C3E4E4 5px solid;
}
  .form-hero p,.form-hero h1 {
 background:rgba(255,255,255,0.50);
border-left:4px solid #FFB53D;
padding:20px;
margin:30px auto;
max-width:720px;
color: #FFFFFF;
 font-size: 20px;
       }

   .form-hero h1 {
 background:rgba(205,205,105,0.80);
border-left:4px solid #FFB53D;
padding:5px;
margin:20px auto;
max-width:720px;
color: #FFFFFF;
 font-size: 30px;
       }
.palyazat-form{
    max-width:800px;
    margin:60px auto;
    padding:0 20px
}

.form-step{
    background:#fff;
    padding:40px;
    border-radius:20px;
    margin-bottom:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.1)
}

.form-step h2{
    margin-top:0;
    color:#b45309
}

label{
    display:block;
    margin-top:20px;
    font-weight:bold
}

input,textarea,select{
    width:100%;
    padding:14px;
    margin-top:6px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:1rem
}

textarea{min-height:100px}

.help{
    background:#fef3c7;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px
}

.form-step.final{
    text-align:center;
    background:#f59e0b;
    color:#fff
}

.form-step.final p{
    font-size:1.1rem
}

 .faq{
    max-width:900px;
    margin:80px auto;
    padding:0 20px
}

.faq h2{
    text-align:center;
    margin-bottom:40px;
    background:rgba(255,255,255,0.25);
border-left:4px solid #FFB53D;
padding:20px;
margin:30px auto;
max-width:720px;
color: #F2F2F2;

}

.faq-item{
    margin-bottom:15px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08)
}

.faq-question{
    width:100%;
    background:#f59e0b;
    color:#fff;
    border:none;
    padding:18px;
    font-size:1rem;
    font-weight:bold;
    text-align:left;
    cursor:pointer
}

.faq-answer{
    background:#fff;
    display:none;
    padding:20px;
    font-size:.95rem
}


.btn.big:disabled{
    padding: 10px 20px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    background: #5F7D9B;
    color: #fff;
    font-size: 14px;
    opacity: 0.5;
}
 .btn.big{
    padding: 10px 20px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    background: #5F7D9B;
    color: #fff;
    font-size: 14px;

}
.btn.secondary{
    background:#374151;
    color:#fff;
    margin-top:10px;
    padding: 10px;
}

.upload-status{
    margin-top:15px;
    font-weight:bold
}

.upload-status.ok{
    color:#16a34a
}
.upload-status.error{
    color:#dc2626
}

.preview{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:15px;
    margin-top:20px
}

.preview-card{
    position:relative;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.15)
}

.preview-card img{
    max-width:100%;
    height:auto;
    object-fit:cover
}

.remove-btn{
    position:absolute;
    top:5px;
    right:5px;
    color:#DD131A;
    border: 2px #FFFFFF solid;
    border-radius:50%;
    width:50px;
    height:50px;
    cursor:pointer;
    font-weight:bold;
      font-size: xx-large;
       background: #2F3D4C  ;
       opacity: 0.8;
}

 .modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: #ffffff;
    padding: 40px 50px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    max-width: 420px;
    animation: pop .3s ease-out;
}

.modal-content h3 {
    margin: 20px 0 10px;
    font-size: 22px;
}

.modal-content p {
    font-size: 14px;
    color: #555;
}

/* Loader */
.loader {
    width: 64px;
    height: 64px;
    border: 6px solid #e5e7eb;
    border-top-color: #1f2937;
    border-radius: 50%;
    margin: auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pop {
    from { transform: scale(.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}