:root{
      --ink:#172b38;
      --muted:#60717b;
      --paper:#f4f5f2;
      --line:#dbe1df;
      --accent:#f6c453;
      --dark:#102733}
      *{
      box-sizing:border-box}
      html{
      scroll-behavior:smooth;
      scroll-padding-top:120px}
      body{
      margin:0;
      background:var(--paper);
      color:var(--ink);
      font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
      line-height:1.7}
      a{
      color:inherit}
      button{
      font:inherit}
      img{
      display:block;
      width:100%;
      object-fit:cover}
      [hidden]{
      display:none!important}
      a:focus-visible,button:focus-visible{
      outline:3px solid #c58b00;
      outline-offset:5px}
      .wrap{
      width:min(1220px,calc(100% - 64px));
      margin:auto}
      .skip{
      position:absolute;
      left:20px;
      top:-100px;
      z-index:100;
      background:white;
      padding:12px}
      .skip:focus{
      top:10px}
      header{
      position:sticky;
      top:0;
      z-index:20;
      background:#f4f5f2ed;
      backdrop-filter:blur(18px);
      border-bottom:1px solid #172b3810}
      .header-row{
      min-height:98px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px}
      .brand{
      display:flex;
      align-items:center;
      gap:13px;
      text-decoration:none}
      .brand-icon{
      display:grid;
      place-items:center;
      width:46px;
      height:46px;
      border-radius:50%;
      background:var(--dark);
      color:var(--accent);
      font-size:27px;
      font-weight:800}
      .brand-name{
      font-size:25px;
      line-height:1.15;
      font-weight:900;
      letter-spacing:-1px}
      .brand small{
      display:block;
      margin-top:5px;
      font-size:9px;
      letter-spacing:1.8px;
      font-weight:650;
      color:var(--muted)}
      nav{
      display:flex;
      align-items:center;
      gap:5px;
      padding:6px;
      background:#e8ece8;
      border:1px solid #dce2de;
      border-radius:100px}
      nav a{
      text-decoration:none;
      border-radius:100px;
      padding:11px 20px;
      font-size:13px;
      font-weight:700;
      color:#526570;
      transition:background .2s,color .2s}
      nav a:hover{
      background:#ffffffa0;
      color:var(--dark)}
      nav a.active{
      background:var(--dark);
      color:white;
      box-shadow:0 3px 8px #10273320}
      .menu-toggle{
      display:none}
      .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      border:0;
      border-radius:100px;
      padding:15px 25px;
      background:var(--dark);
      color:white;
      font-weight:750;
      font-size:14px;
      text-decoration:none;
      cursor:pointer;
      transition:transform .2s,background .2s}
      .button:hover{
      background:#284755;
      transform:translateY(-2px)}
      .button.light{
      background:var(--accent);
      color:var(--dark)}
      .button.outline{
      background:transparent;
      color:var(--ink);
      border:1px solid #b9c6c9}
      .hero{
      margin-top:32px;
      padding:0}
      .hero-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      background:var(--dark);
      border-radius:28px;
      overflow:hidden;
      min-height:560px;
      position:relative}
      .hero-copy{
      padding:62px 52px;
      color:white;
      position:relative;
      z-index:1}
      .eyebrow{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2px;
      font-weight:800;
      color:#526d77;
      margin:0 0 20px}
      .hero .eyebrow{
      color:var(--accent);
      display:flex;
      align-items:center;
      gap:10px}
      .hero .eyebrow:before{
      content:"";
      width:23px;
      height:2px;
      background:var(--accent)}
      h1{
      font-size:clamp(44px,5.2vw,74px);
      font-weight:850;
      line-height:1.05;
      letter-spacing:-3px;
      margin:0 0 28px}
      h1 span{
      color:var(--accent)}
      .lead{
      font-size:17px;
      color:#bdcbd0;
      max-width:410px}
      .actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:30px}
      .hero .button{
      background:var(--accent);
      color:var(--dark)}
      .hero .button.outline{
      background:transparent;
      color:white;
      border-color:#ffffff45}
      .hero-photo{
      position:relative;
      min-width:0;
      background:#203b48}
      .slide-stage{
      height:100%;
      min-height:560px;
      position:relative;
      background:#203b48}
      .slide-stage img{
      width:100%;
      height:100%;
      position:absolute;
      inset:0;
      object-fit:contain;
      background:#203b48}
      .slide-placeholder{
      height:100%;
      min-height:560px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:36px;
      text-align:center;
      color:#d9e3e7;
      background:radial-gradient(ellipse at 80% 15%,#406572,transparent 65%),repeating-linear-gradient(135deg,transparent 0 45px,#ffffff03 46px 47px),#203b48}
      .slide-placeholder span{
      display:grid;
      place-items:center;
      width:96px;
      height:96px;
      border:1px solid #ffffff30;
      border-radius:50%;
      font-size:45px;
      color:var(--accent);
      margin-bottom:24px}
      .slide-placeholder strong{
      font-size:21px;
      font-weight:650}
      .slide-placeholder p{
      font-size:13px;
      color:#adc1c8;
      margin-top:10px}
      .slide-controls{
      position:absolute;
      bottom:20px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      gap:12px;
      padding:7px 10px;
      background:#102733df;
      color:white;
      border:1px solid #ffffff25;
      border-radius:100px;
      backdrop-filter:blur(12px);
      white-space:nowrap}
      .slide-controls button{
      border:0;
      background:transparent;
      color:white;
      min-height:35px;
      min-width:35px;
      border-radius:100px;
      cursor:pointer}
      .slide-controls button:hover{
      background:#ffffff20}
      #slide-pause{
      padding:0 9px;
      font-size:12px}
      #slide-counter{
      font-size:12px;
      min-width:44px;
      text-align:center}
      .hero-photo noscript{
      position:absolute;
      bottom:15px;
      left:20px;
      color:white;
      font-size:12px}
      .facts{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      margin:0;
      padding:30px 24px;
      border-bottom:1px solid var(--line)}
      .facts div{
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:center;
      border-right:1px solid var(--line)}
      .facts div:last-child{
      border:0}
      .facts strong{
      font-size:21px;
      letter-spacing:-.7px}
      .facts span{
      max-width:110px;
      font-size:12px;
      color:var(--muted);
      line-height:1.45}
      section{
      padding:88px 0}
      h2{
      font-size:clamp(32px,3.5vw,48px);
      line-height:1.14;
      letter-spacing:-1.8px;
      margin:0 0 24px}
      h3{
      font-size:23px;
      line-height:1.3;
      letter-spacing:-.5px;
      margin:0 0 15px}
      p{
      margin:0 0 20px}
      .about{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:90px}
      .about p{
      color:var(--muted);
      font-size:16px}
      .about .button{
      margin-top:8px}
      .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:40px;
      margin-bottom:38px}
      .section-head h2{
      margin-bottom:0}
      .section-head p{
      max-width:400px;
      color:var(--muted);
      font-size:15px;
      margin:0}
      .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:26px}
      .card{
      position:relative;
      background:white;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 7px 28px #172b3807;
      border:1px solid #e4e8e4;
      display:flex;
      flex-direction:column;
      transition:transform .25s,box-shadow .25s}
      .card:hover{
      transform:translateY(-6px);
      box-shadow:0 15px 35px #172b3812}
      .card img{
      height:245px}
      .card-body{
      padding:28px;
      display:flex;
      flex-direction:column;
      flex:1}
      .tag{
      font-size:10px;
      font-weight:800;
      letter-spacing:1.5px;
      color:#5a7481;
      margin-bottom:14px}
      .card p{
      color:var(--muted);
      font-size:14px}
      .card a{
      margin-top:auto;
      padding-top:18px;
      border-top:1px solid var(--line);
      font-size:13px;
      font-weight:750;
      text-decoration:none}
      .card a:hover{
      text-decoration:underline;
      text-underline-offset:4px}
      #features1-2{
      background:#e9eeeb;
      border-top:1px solid #e1e6e2;
      border-bottom:1px solid #e1e6e2}
      .support{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:28px;
      background:var(--accent);
      border-radius:20px;
      margin-top:32px;
      padding:30px 34px}
      .support h3{
      font-size:20px;
      margin-bottom:7px}
      .support p{
      font-size:13px;
      margin:0}
      .support strong{
      font-size:21px;
      letter-spacing:-.5px;
      white-space:nowrap}
      .support .button{
      background:var(--dark);
      color:white;
      font-size:12px;
      padding:13px 20px}
      .contact{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:80px}
      .contact-panel{
      border-top:2px solid var(--ink)}
      .contact-panel dl{
      margin:0}
      .contact-panel dt{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:1.3px;
      color:var(--muted);
      margin:20px 0 5px}
      .contact-panel dd{
      font-size:clamp(17px,2vw,24px);
      font-weight:650;
      margin:0;
      padding-bottom:20px;
      border-bottom:1px solid var(--line);
      overflow-wrap:anywhere}
      .contact-panel a{
      text-decoration:none}
      .contact-panel a:hover{
      text-decoration:underline;
      text-underline-offset:5px}
      .share{
      margin-top:32px}
      .notice{
      font-size:12px;
      color:var(--muted);
      margin-top:12px}
      footer{
      background:var(--dark);
      color:#c1d0d6;
      padding:42px 0}
      .footer-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:24px;
      font-size:12px}
      .footer-row strong{
      font-size:20px;
      color:white}
      .footer-links{
      display:flex;
      gap:24px}
      .footer-links a{
      text-decoration:none}
      .footer-links a:hover{
      color:var(--accent)}
      @media(max-width:1000px){
      .wrap{
      width:calc(100% - 40px)}
      nav a{
      padding:10px 14px}
      .hero-copy{
      padding:48px 32px}
      .hero-grid,.slide-stage,.slide-placeholder{
      min-height:520px}
      .facts div{
      gap:10px}
      .facts strong{
      font-size:18px}
      .about{
      gap:40px}
      .cards{
      gap:18px}
      .card-body{
      padding:22px}
      .support{
      flex-wrap:wrap}
      .contact{
      gap:40px}
      }
      @media(max-width:760px){
      html{
      scroll-padding-top:92px}
      .wrap{
      width:calc(100% - 32px)}
      .header-row{
      min-height:80px;
      position:relative}
      .brand-icon{
      width:38px;
      height:38px}
      .brand-name{
      font-size:22px}
      .brand small{
      font-size:8px}
      .menu-toggle{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      background:white;
      color:var(--ink);
      border:1px solid var(--line);
      border-radius:100px;
      font-size:12px;
      font-weight:700;
      cursor:pointer}
      .menu-icon{
      display:grid;
      gap:4px}
      .menu-icon i{
      display:block;
      width:16px;
      height:2px;
      background:currentColor}
      nav{
      display:none;
      position:absolute;
      top:73px;
      right:0;
      left:0;
      flex-direction:column;
      align-items:stretch;
      border-radius:18px;
      background:#f4f5f2;
      padding:10px;
      box-shadow:0 20px 50px #10273320;
      gap:3px}
      nav.open{
      display:flex}
      nav a{
      padding:14px 18px;
      border-radius:10px;
      font-size:14px}
      .hero{
      margin-top:18px}
      .hero-grid{
      grid-template-columns:1fr;
      border-radius:20px;
      min-height:0}
      .hero-copy{
      padding:35px 26px 40px}
      h1{
      font-size:clamp(42px,10vw,64px);
      letter-spacing:-2px}
      .hero .eyebrow{
      font-size:9px;
      letter-spacing:1.4px}
      .lead{
      font-size:15px}
      .actions{
      gap:10px}
      .button{
      padding:13px 20px;
      font-size:12px}
      .slide-stage,.slide-placeholder{
      height:340px;
      min-height:340px}
      .facts{
      padding:24px 0;
      gap:6px}
      .facts div{
      flex-direction:column;
      text-align:center;
      gap:5px}
      .facts strong{
      font-size:17px}
      .facts span{
      font-size:11px}
      section{
      padding:56px 0}
      .about,.contact{
      grid-template-columns:1fr;
      gap:28px}
      h2{
      letter-spacing:-1.2px}
      .section-head{
      display:block}
      .section-head p{
      margin-top:18px}
      .cards{
      grid-template-columns:1fr;
      gap:22px}
      .card img{
      height:260px}
      .card-body{
      padding:25px}
      .support{
      padding:26px;
      gap:20px}
      .support strong{
      font-size:21px}
      .support .button{
      width:100%}
      .footer-row{
      align-items:flex-start;
      flex-direction:column;
      gap:25px}
      .slide-controls{
      gap:8px}
      .contact-panel dd{
      font-size:19px}
      }
      @media(prefers-reduced-motion:reduce){
      html{
      scroll-behavior:auto}
      *{
      transition:none!important}
      .button:hover,.card:hover{
      transform:none}
      }
    
      /* Adatvédelmi tájékoztató a lábrészben. */
      .privacy-panel {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #ffffff30;
      }
      .privacy-panel h2 { color: white; font-size: 24px; letter-spacing: -.5px; }
      .privacy-panel p { max-width: 920px; font-size: 14px; }
      .privacy-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
      .privacy-actions button { background: #f6c453; color: #102733; min-width: 160px; }
      .privacy-actions button:hover { background: #ffda7d; }
      .privacy-open { background: transparent; color: white; border: 1px solid #ffffff60; }
      .privacy-summary { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
      .privacy-summary p { margin: 0; font-size: 13px; }
          /* Kör alakú egyesületi logó. */
      .brand-icon {
        overflow: hidden;
        flex-shrink: 0;
        background: white;
      }
      .brand-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
      }
          /* A színes logó az előző méret 1,5-szerese. */
      .brand-icon {
        width: 69px;
        height: 69px;
        background: transparent;
      }
      @media (max-width: 760px) {
        .brand-icon {
          width: 57px;
          height: 57px;
        }
      }

          .hymn-button-row {
        margin-top: 12px;
      }
      /* Az 1%-os támogatás mobilon a fejléc alá kerül. */
      #mobile-support {
        display: none;
      }
      @media (max-width: 760px) {
        #mobile-support {
          display: block;
        }
        #mobile-support .support {
          margin-top: 16px;
          padding: 20px;
          gap: 12px;
        }
      }