@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#030914;--panel:#081626;--line:#193b5c;--blue:#1677ff;--cyan:#35b5ff;--muted:#879bb5;--white:#f4f8ff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.glow{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(100px);opacity:.16}.g1{width:440px;height:440px;background:#006eff;top:70px;left:-250px}.g2{width:420px;height:420px;background:#00aaff;right:-260px;top:650px}header{height:86px;padding:0 clamp(20px,6vw,100px);display:flex;align-items:center;justify-content:space-between;background:#030a14eF;border-bottom:1px solid #15304b;position:sticky;top:0;z-index:5;backdrop-filter:blur(16px)}.brand{position:relative;font-size:26px;font-weight:900;font-style:italic;letter-spacing:-1px}.brand i,.footbrand i{color:#268bff}.brand small{position:absolute;top:29px;left:26px;font-size:7px;letter-spacing:2px;color:#7187a1;white-space:nowrap;font-style:normal;font-weight:500}nav{display:flex;align-items:center;gap:28px;color:#a7b7ca;font-size:12px}nav a:hover{color:white}nav .discord{padding:11px 17px;border:1px solid #1e6fc1;border-radius:8px;background:#0b2440;color:white}#menuToggle{display:none;background:none;color:white;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:20px}.wrap{width:min(1180px,calc(100% - 44px));margin:auto}.hero{min-height:570px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding:35px 0}.eyebrow{display:flex;align-items:center;gap:10px;color:#65baff;font-size:10px;font-weight:800;letter-spacing:2px}.eyebrow span{width:7px;height:7px;background:#20dc76;border-radius:50%;box-shadow:0 0 12px #20dc76}.hero h1{font-size:clamp(44px,5.4vw,70px);line-height:1.04;letter-spacing:-3px;margin:24px 0}.hero h1 em,h2 em{font-style:normal;color:#258bff;text-shadow:0 0 32px #007bff44}.copy>p{max-width:520px;color:#9aabc0;font-size:14px;line-height:1.9}.actions{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:28px}.btn{height:52px;padding:0 22px;border:1px solid #284660;border-radius:9px;background:#091626;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:linear-gradient(110deg,#1169ed,#087dff);border-color:#3299ff;box-shadow:0 0 25px #007aff4b}.btn.primary:hover{box-shadow:0 0 35px #007aff88}.meta{display:flex;gap:17px;flex-wrap:wrap;color:#7288a3;font-size:9px;margin-top:32px}.art{height:440px;position:relative;display:flex;align-items:center;justify-content:center}.orbit{position:absolute;width:min(460px,95%);height:255px;border:2px solid #087eff;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 20px #007bff44}.o1{opacity:.75}.o2{width:390px;height:205px;transform:rotate(24deg);opacity:.35;border-color:#2bbaff}.logo{position:relative;text-align:center;transform:skew(-8deg);filter:drop-shadow(0 0 17px #087bff99)}.logo strong{display:block;font-size:clamp(90px,12vw,150px);line-height:.9;letter-spacing:-8px;font-style:italic;background:linear-gradient(#fff 0%,#9cbde2 25%,#f4fbff 43%,#54769d 57%,#e8f5ff 73%,#7694bb);color:transparent;background-clip:text;-webkit-background-clip:text}.logo b{display:block;font-size:clamp(22px,3vw,38px);color:#e7f4ff;text-shadow:0 2px #4c6e9e}.logo hr{border:0;height:2px;width:80%;background:linear-gradient(90deg,transparent,#1d9bff,transparent);box-shadow:0 0 12px #008cff}.logo small{font-size:8px;letter-spacing:4px;color:#8ab7e9}.art label{position:absolute;bottom:7px;right:5px;font-size:8px;letter-spacing:2px;color:#4d729a}.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.card{min-width:0;min-height:86px;padding:16px;border:1px solid #173958;border-radius:13px;background:linear-gradient(135deg,#09192b,#050f1b);display:flex;align-items:center;gap:13px}.card small{display:block;color:#849ab4;font-size:9px;letter-spacing:.6px;margin-bottom:7px}.card strong{font-size:13px;display:block;overflow-wrap:anywhere}.symbol{font-size:30px;color:#b7d1ed}.card button{margin-left:auto;flex-shrink:0;border:1px solid #20476c;background:#0c2035;color:#8ccaff;border-radius:7px;padding:7px 10px;font-size:17px;cursor:pointer}.dot{width:10px;height:10px;border-radius:50%;background:#8494a8;flex-shrink:0}.dot.online{background:#20dc76;box-shadow:0 0 13px #20dc76}.dot.offline{background:#f15f72}.status div{min-width:0}.status #playerCount{margin:6px 0 0;letter-spacing:0;font-size:9px}.dicon{width:38px;height:38px;border:1px solid #3d86ff;border-radius:12px;display:grid;place-items:center;background:#0d2c53;color:#b5d8ff;font-weight:900}.arrow{margin-left:auto;color:#5ab1ff}.features{padding:112px 0 100px}.heading{text-align:center}.heading .eyebrow,.cta .eyebrow{justify-content:center}.heading h2,.rules h2,.cta h2{font-size:clamp(34px,4vw,49px);letter-spacing:-1.8px;margin:16px 0}.heading p,.cta>p{font-size:13px;color:#879bb5}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:42px}.feature-grid article{position:relative;padding:28px 25px 32px;min-height:220px;border:1px solid #183653;border-radius:14px;background:linear-gradient(145deg,#091a2c,#050e1a);overflow:hidden}.feature-grid article>span{position:absolute;right:22px;top:20px;color:#294966;font-size:12px;font-weight:800}.icon{width:42px;height:42px;border:1px solid #1b5b96;border-radius:11px;display:grid;place-items:center;color:#62b7ff;font-size:21px;background:#0b2541}.feature-grid h3{font-size:16px;margin:23px 0 11px}.feature-grid p,.rules-copy p{font-size:12px;line-height:1.9;color:#879bb4}.rules{padding-bottom:85px;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:330px;border:1px solid #1a3e60;border-radius:18px;overflow:hidden;background:linear-gradient(110deg,#091a2b,#06101d)}.rules-copy{padding:42px}.rules h2{margin:18px 0}.rules-copy p{max-width:420px}.rules-copy>a{display:inline-block;margin-top:14px;color:#68b8ff;font-size:12px;font-weight:700}.shield-area{height:320px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse,#0c3b70 0%,#07182b 43%,transparent 72%)}.ring{position:absolute;width:280px;height:170px;border:2px solid #087eff;transform:rotate(-25deg);border-radius:50%;box-shadow:0 0 25px #007bff44}.shield{width:120px;height:140px;clip-path:polygon(50% 0,93% 15%,87% 72%,50% 100%,13% 72%,7% 15%);background:linear-gradient(145deg,#d9efff,#176fe3 42%,#061c3a 70%);display:grid;place-items:center;font-size:29px;font-weight:900;font-style:italic;text-shadow:0 2px 6px #00172e}.shield small{font-size:12px}.shield-area label{position:absolute;bottom:25px;font-size:8px;letter-spacing:3px;color:#6596c7}.cta{text-align:center;padding:90px 0}.cta h2{margin-bottom:10px}.cta .actions{justify-content:center}.cta .btn{min-width:170px}footer{min-height:78px;border-top:1px solid #142e49;padding:22px clamp(24px,6vw,100px);display:flex;align-items:center;justify-content:space-between;gap:18px;color:#6f849e;font-size:10px;background:#040c16}.footbrand{font-size:17px;font-weight:900;font-style:italic;color:white}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#102b46;border:1px solid #2474b9;color:white;padding:12px 18px;border-radius:9px;font-size:12px;transition:.25s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){header{padding:0 22px}nav{gap:13px}.hero{grid-template-columns:1fr;padding-top:30px}.copy{text-align:center}.copy .eyebrow,.actions,.meta{justify-content:center}.copy>p{margin-inline:auto}.art{height:340px;grid-row:1}.cards{grid-template-columns:1fr}.features{padding-top:80px}.rules-copy{padding:30px}.orbit{max-width:95%}}
@media(max-width:640px){header{height:72px}.brand{font-size:22px}.brand small{top:26px;font-size:6px}#menuToggle{display:block}nav{display:none;position:absolute;top:68px;left:12px;right:12px;padding:12px;background:#071321;border:1px solid #1c3c5a;border-radius:12px;flex-direction:column;align-items:stretch;gap:0}nav.open{display:flex}nav a{padding:12px}.wrap{width:calc(100% - 30px)}.art{height:270px;grid-row:auto}.orbit{width:320px;height:175px}.o2{width:270px;height:145px}.logo strong{font-size:110px;letter-spacing:-9px}.logo b{font-size:24px}.hero h1{font-size:45px;letter-spacing:-2px}.copy>p{font-size:13px}.actions{flex-direction:column}.btn{width:100%}.meta{gap:10px}.features{padding:72px 0}.feature-grid{grid-template-columns:1fr;margin-top:28px}.feature-grid article{min-height:180px}.rules{grid-template-columns:1fr}.shield-area{height:240px}.rules-copy{padding:30px 24px}.cta{padding:65px 0}footer{flex-direction:column;text-align:center;gap:12px}}

/* CFS Network videógaléria */
.videos-section {
  padding-top: 70px;
  padding-bottom: 70px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

.video-card {
  min-width: 0;
  overflow: hidden;
  background: rgba(8, 20, 40, 0.92);
  border: 1px solid rgba(41, 145, 255, 0.28);
  border-radius: 16px;
  box-shadow: 0 0 22px rgba(0, 100, 255, 0.07);
  transition: border-color 0.2s, transform 0.2s,
              box-shadow 0.2s;
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: #2991ff;
  box-shadow: 0 0 25px rgba(41, 145, 255, 0.16);
}

.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #020711;
}

.video-info {
  padding: 18px;
}

.video-info span {
  color: #55aaff;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.video-info h3 {
  color: #f2f7ff;
  font-size: 17px;
  margin: 10px 0 2px;
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }

  .videos-section {
    padding-top: 45px;
    padding-bottom: 45px;
  }
}

.feature-grid article .gta-buy-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    margin: 0 0 14px;
    background: transparent;
    border: none;
    color: #f4f8ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.feature-grid article .gta-buy-btn .gta-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55baff;
    background: #0b2541;
    border: 1px solid #1b5b96;
    border-radius: 11px;
}

.feature-grid article .gta-buy-btn:hover {
    color: #55baff;
    background: transparent;
    transform: translateY(-2px);
}

/* 2. kártya – CFS Launcher */
.feature-grid article.launcher-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature-grid article.launcher-card .launcher-download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  margin: 0 0 18px;
  padding: 0;
  color: #55baff;
  background: #0b2541;
  border: 1px solid #1b5b96;
  border-radius: 11px;
  transition: 0.2s ease;
}

.feature-grid article.launcher-card .launcher-download-icon:hover {
  background: #10365b;
  border-color: #35a5ff;
  box-shadow: 0 0 16px #087bff44;
  transform: translateY(-2px);
}

.feature-grid article.launcher-card h3 {
  margin: 0 0 11px;
  font-size: 16px;
  line-height: 1.5;
}

.feature-grid article.launcher-card h3 a {
  color: #f4f8ff;
}

.feature-grid article.launcher-card p {
  margin: 0;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/* Launcher ikon – kék keretes megjelenés */
.feature-grid article.launcher-card > .launcher-download-icon {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    padding: 0 !important;
    margin: 0 0 18px !important;

    align-items: center;
    justify-content: center;

    color: #55baff !important;
    background: #0b2541 !important;
    border: 1px solid #1b5b96 !important;
    border-radius: 11px !important;

    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: 0.2s ease;
}

.feature-grid article.launcher-card > .launcher-download-icon:hover {
    background: #10365b !important;
    border-color: #35a5ff !important;
    box-shadow: 0 0 16px #087bff44;
    transform: translateY(-2px);
}

.feature-grid article.launcher-card > .launcher-download-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Letöltési kártyák */

.download-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin: 35px 0 45px;
}

.download-cards .download-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 280px;
    padding: 26px 22px;
    border: 1px solid #193b5c;
    border-radius: 14px;
    background: linear-gradient(145deg, #091a2c, #050e1b);
    box-shadow: 0 0 22px rgba(0, 100, 255, 0.07);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.download-cards .download-card:hover {
    transform: translateY(-4px);
    border-color: #2991ff;
    box-shadow: 0 0 24px rgba(0, 123, 255, 0.15);
}

.download-cards .download-card .download-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    border: 1px solid #1b5b96;
    border-radius: 11px;
    background: #0b2541;
    font-size: 21px;
}

.download-cards .download-card .download-number {
    position: absolute;
    top: 25px;
    right: 22px;
    color: #294966;
    font-size: 12px;
    font-weight: 800;
}

.download-cards .download-card h3 {
    margin: 0 0 10px;
    color: #f4f8ff;
    font-size: 16px;
}

.download-cards .download-card p {
    flex: 1;
    margin: 0 0 24px;
    color: #879bb5;
    font-size: 12px;
    line-height: 1.9;
}

.download-cards .download-card .download-btn {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
}

@media (max-width: 900px) {
    .download-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .download-cards {
        grid-template-columns: 1fr;
    }
}

/* CFS Network – gépigény kártyák */
.requirements-section {
    padding-top: 75px;
    padding-bottom: 90px;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 35px;
    align-items: stretch;
}

.requirement-card {
    position: relative;
    min-width: 0;
    padding: 28px;
    border: 1px solid #193b5c;
    border-radius: 16px;
    background: linear-gradient(145deg, #091a2c, #050e1b);
    transition: transform 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.requirement-card:hover {
    transform: translateY(-4px);
    border-color: #2991ff;
    box-shadow: 0 0 25px #007bff20;
}

.requirement-card.recommended {
    border-color: #1677ff;
    background: linear-gradient(145deg, #0b2140, #050e1b);
    box-shadow: inset 0 0 25px #087bff0a;
}

.requirement-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border: 1px solid #1b5b96;
    border-radius: 12px;
    background: #0b2541;
    font-size: 23px;
}

.requirement-label {
    position: absolute;
    top: 30px;
    right: 25px;
    color: #55aaff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.requirement-card h3 {
    margin: 0 0 10px;
    color: #f4f8ff;
    font-size: 21px;
}

.requirement-description {
    margin: 0 0 22px;
    color: #879bb5;
    font-size: 12px;
    line-height: 1.8;
}

.requirement-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirement-list li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid #19334d;
}

.requirement-list li span {
    color: #6e9bc6;
    font-size: 11px;
    font-weight: 600;
}

.requirement-list li strong {
    color: #e8f1ff;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .requirements-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .requirements-section {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    .requirement-card {
        padding: 22px 18px;
    }

    .requirement-card h3 {
        font-size: 19px;
    }

    .requirement-label {
        right: 18px;
        font-size: 9px;
    }
}

/* CFS Network – Közösségi oldalak */

.community-section {
    padding: 90px 24px;
    max-width: 1240px;
    margin: 0 auto;
}

.community-heading {
    text-align: center;
    margin-bottom: 42px;
}

.community-label {
    color: #39a0ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.community-heading h2 {
    color: #f4f7ff;
    font-size: clamp(27px, 4vw, 42px);
    margin: 18px 0 12px;
}

.community-heading h2 span {
    color: #278cff;
}

.community-heading p {
    color: #9eafc6;
    line-height: 1.7;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.community-card {
    min-height: 210px;
    padding: 30px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #101b2a;
    border: 1px solid #26384d;
    border-radius: 12px;
    transition: transform .25s ease, background .25s ease,
                box-shadow .25s ease;
}

.community-card:hover {
    transform: translateY(-7px);
    background: #152438;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
}

.community-icon {
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
}

.community-card strong {
    font-size: 21px;
}

.community-card small {
    color: #a6b5ca;
    font-size: 13px;
}

.community-card.facebook {
    border-color: #1877f2;
}
.community-card.facebook .community-icon,
.community-card.facebook strong {
    color: #278cff;
}

.community-card.tiktok {
    border-left: 4px solid #00f2ea;
    border-right: 4px solid #ff0050;
}
.community-card.tiktok .community-icon {
    color: #fff;
    text-shadow: -2px 0 #00f2ea, 2px 0 #ff0050;
}

.community-card.youtube {
    border-color: #ff1725;
}
.community-card.youtube .community-icon,
.community-card.youtube strong {
    color: #ff1725;
}

.community-card.discord {
    border-color: #5865f2;
}
.community-card.discord .community-icon,
.community-card.discord strong {
    color: #7280ff;
}

@media (max-width: 850px) {
    .community-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .community-section {
        padding: 65px 20px;
    }
}

@media (max-width: 480px) {
    .community-grid {
        grid-template-columns: 1fr;
    }

    .community-card {
        min-height: 165px;
    }
}


/* CFS Network logó animáció */
.art .logo {
    position: relative;
    transform-origin: center;
    animation: cfsLogoFloat 4s ease-in-out infinite;
    will-change: transform, filter;
}

@keyframes cfsLogoFloat {
    0%, 100% {
        transform: translateY(0) skew(-8deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(0, 119, 255, 0.35));
    }

    50% {
        transform: translateY(-10px) skew(-8deg) scale(1.025);
        filter: drop-shadow(0 0 25px rgba(0, 145, 255, 0.8));
    }
}

/* A logó körüli kék ellipszisek is mozognak */
.art .o1 {
    transform-origin: center;
    animation: cfsOrbitOne 8s ease-in-out infinite;
}

.art .o2 {
    transform-origin: center;
    animation: cfsOrbitTwo 7s ease-in-out infinite;
}

@keyframes cfsOrbitOne {
    0%, 100% { transform: rotate(-18deg) scale(1); }
    50% { transform: rotate(-12deg) scale(1.04); }
}

@keyframes cfsOrbitTwo {
    0%, 100% { transform: rotate(24deg); }
    50% { transform: rotate(34deg); }
}

/* Ha a látogató mozgáscsökkentést kér, az animáció leáll */
@media (prefers-reduced-motion: reduce) {
    .art .logo,
    .art .o1,
    .art .o2 {
        animation: none !important;
    }
}

/* CFS logó – teljes felirat, levágás nélkül */
.art {
    min-width: 0;
    overflow: visible;
}

.art .logo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform-origin: center;
}

.art .logo strong {
    display: block;
    width: 100%;
    font-size: clamp(85px, 9vw, 125px) !important;
    letter-spacing: -6px !important;
    line-height: 0.95;
    white-space: nowrap;
    overflow: visible;
    transform: scaleX(0.92);
}

@media (max-width: 640px) {
    .art .logo strong {
        font-size: clamp(85px, 19vw, 100px) !important;
        letter-spacing: -5px !important;
    }
}
.logo strong {
    position: relative;
    left: -25px;
}

/* Fejléc javítása – CFS Network */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

header .brand {
    flex-shrink: 0;
}

header #nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 18px;
    min-width: 0;
}

header #nav > a,
header #nav .account-links a {
    white-space: nowrap;
}

header .account-links {
    display: contents;
}

/* Kisebb képernyő */
@media (max-width: 1000px) {
    header {
        flex-wrap: wrap;
    }

    header #nav {
        gap: 10px 14px;
    }
}