@import url("fonts.css");

/* ============================================================
   Cleared for Europe — design system
   by EcomXpert. No external requests: works behind the GFW.
   ============================================================ */

:root{
  --ground:#E4E7E9; --surface:#F8F9FA; --surface-2:#EDEFF1; --surface-3:#E9ECEE;
  --ink:#13181C; --ink-2:#3D474F; --ink-3:#6B767F;
  --rule:#C3CAD0; --rule-soft:#D6DBDF;
  --seal:#C41230; --seal-ink:#C41230; --seal-wash:rgba(196,18,48,.07);
  --jade:#0C6F53; --jade-wash:rgba(12,111,83,.09); --warn:#9A5400;
  --shadow:0 1px 0 rgba(19,24,28,.06), 0 14px 34px -22px rgba(19,24,28,.45);
  --shadow-lift:0 2px 0 rgba(19,24,28,.05), 0 26px 50px -28px rgba(19,24,28,.55);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --f-cn:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0D1114; --surface:#161C21; --surface-2:#1D242A; --surface-3:#222A31;
  --ink:#E7ECEF; --ink-2:#B3BDC4; --ink-3:#828E97;
  --rule:#2C363D; --rule-soft:#242D33;
  --seal:#FF5268; --seal-ink:#FF7183; --seal-wash:rgba(255,82,104,.11);
  --jade:#35BE92; --jade-wash:rgba(53,190,146,.12); --warn:#E8A33A;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 16px 38px -24px rgba(0,0,0,.9);
  --shadow-lift:0 2px 0 rgba(0,0,0,.5), 0 28px 54px -28px rgba(0,0,0,1);
}}
:root[data-theme="dark"]{
  --ground:#0D1114; --surface:#161C21; --surface-2:#1D242A; --surface-3:#222A31;
  --ink:#E7ECEF; --ink-2:#B3BDC4; --ink-3:#828E97;
  --rule:#2C363D; --rule-soft:#242D33;
  --seal:#FF5268; --seal-ink:#FF7183; --seal-wash:rgba(255,82,104,.11);
  --jade:#35BE92; --jade-wash:rgba(53,190,146,.12); --warn:#E8A33A;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 16px 38px -24px rgba(0,0,0,.9);
  --shadow-lift:0 2px 0 rgba(0,0,0,.5), 0 28px 54px -28px rgba(0,0,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.cn{font-family:var(--f-cn);font-weight:500}
.zh{font-family:var(--f-cn);font-weight:500}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--seal);z-index:60;transition:width .1s linear}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding-inline:24px}
.narrow{max-width:760px}
section{padding-block:clamp(52px,8vw,92px);border-top:1px solid var(--rule-soft)}
section:first-of-type{border-top:0}
.tint{background:var(--surface)}
.tint-2{background:var(--surface-2)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),padding .3s var(--ease)}
header.site.stuck{border-bottom-color:var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:16px;transition:padding .3s var(--ease)}
header.site.stuck .bar{padding-block:10px}
.logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.1}
.logo b{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.logo span{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.logo span i{font-style:normal;color:var(--seal-ink);font-weight:600}
nav.main{display:flex;align-items:center;gap:22px}
nav.main a{font-size:14px;color:var(--ink-2);text-decoration:none;position:relative;padding-block:4px}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--seal);transition:right .3s var(--ease)}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{right:0}
nav.main a[aria-current="page"]{color:var(--ink)}
.btn{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:14.5px;letter-spacing:-.005em;padding:11px 18px;background:var(--seal);color:#fff;text-decoration:none;border:1.5px solid var(--seal);transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:transparent;color:var(--seal-ink);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--seal);color:var(--seal-ink)}
.btn.big{font-size:16.5px;padding:15px 26px}
nav.main a.lang{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;border:1px solid var(--rule);padding:6px 11px;color:var(--ink-2);transition:border-color .25s var(--ease),color .25s var(--ease)}
nav.main a.lang::after{display:none}
nav.main a.lang:hover{border-color:var(--seal);color:var(--seal-ink)}

/* ---------- kinai oldalak: CJK betukeszlet es ritmus ---------- */
body.zh-page{font-family:var(--f-body),var(--f-cn);line-height:1.8}
body.zh-page h1,body.zh-page h2,body.zh-page h3,body.zh-page .pull,body.zh-page .stat b,body.zh-page .counter .num,body.zh-page .tier .price b,body.zh-page .offer .p b,body.zh-page .f-sig,body.zh-page .logo b,body.zh-page .faq summary{font-family:var(--f-display),var(--f-cn)}
body.zh-page h1{letter-spacing:.005em;line-height:1.18;font-size:clamp(29px,5vw,50px)}
body.zh-page h2{letter-spacing:.005em;line-height:1.35}
body.zh-page h3{letter-spacing:.005em;line-height:1.45}
body.zh-page .pull{letter-spacing:.01em;line-height:1.45}
body.zh-page .lede{font-size:16.5px;line-height:1.85}
body.zh-page .card p,body.zh-page .tl-item p,body.zh-page .tier li,body.zh-page .faq .a{line-height:1.85}
body.zh-page h1 .line{overflow:visible}
.burger{display:none;background:none;border:1px solid var(--rule);color:var(--ink);width:40px;height:36px;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;margin:3px auto;transition:transform .3s var(--ease),opacity .2s}
header.site.open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
header.site.open .burger span:nth-child(2){opacity:0}
header.site.open .burger span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.022em;text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(34px,6vw,62px);line-height:1.02}
h2{font-weight:700;font-size:clamp(24px,4vw,38px);line-height:1.1}
h3{font-weight:700;font-size:clamp(17px,2.2vw,20px);line-height:1.25}
.kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:14px}
.kicker b{color:var(--seal-ink);font-weight:500}
.lede{font-size:clamp(17px,2.1vw,19.5px);color:var(--ink-2);max-width:62ch}
.lede-cn{font-family:var(--f-cn);font-size:15px;color:var(--ink-3);max-width:40em;margin-top:10px}
.sec-head{margin-bottom:clamp(28px,4vw,44px);max-width:70ch}
.sec-head p{margin:14px 0 0;color:var(--ink-2);font-size:16.5px}
h2 .zh{color:var(--ink-3);font-size:.62em;margin-left:.5em;font-weight:500}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,84px);border-top:0}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)}
.hero-bg::before{width:52vw;height:52vw;max-width:640px;max-height:640px;top:-18%;right:-12%;background:radial-gradient(circle,var(--seal-wash),transparent 70%);animation:drift 26s var(--ease) infinite alternate}
.hero-bg::after{width:40vw;height:40vw;max-width:480px;max-height:480px;bottom:-20%;left:-10%;background:radial-gradient(circle,var(--jade-wash),transparent 70%);animation:drift2 32s var(--ease) infinite alternate}
@keyframes drift{to{transform:translate3d(-6%,8%,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(8%,-6%,0) scale(1.08)}}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:clamp(28px,5vw,56px);align-items:start}
h1 em{font-style:normal;color:var(--seal-ink)}
h1 .line{display:block;overflow:hidden}
h1 .line>span{display:block;transform:translateY(105%);animation:rise .9s var(--ease) forwards}
h1 .line:nth-child(2)>span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.h1-cn{font-family:var(--f-cn);font-weight:700;font-size:clamp(17px,2.6vw,23px);color:var(--ink-2);margin:16px 0 0;opacity:0;animation:fade .8s .5s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* counter card */
.counter{border:1.5px solid var(--seal);background:var(--seal-wash);padding:22px 20px;text-align:center;position:relative}
.counter::before{content:"";position:absolute;inset:4px;border:1px solid var(--seal);opacity:.45;pointer-events:none}
.counter .code{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--seal-ink);opacity:.9;display:block}
.counter .num{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,8vw,72px);line-height:.92;color:var(--seal-ink);display:block;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.counter .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--seal-ink);display:block}
.counter .lbl-cn{font-family:var(--f-cn);font-size:12px;color:var(--seal-ink);display:block;margin-top:3px;opacity:.85}
.counter .since{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--seal-ink);opacity:.75;display:block;margin-top:12px;padding-top:10px;border-top:1px solid currentColor}

/* ---------- marquee trust band ---------- */
.band{border-block:1px solid var(--rule);background:var(--surface);overflow:hidden;padding-block:14px}
.track{display:flex;gap:46px;width:max-content;animation:slide 42s linear infinite}
.band:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.track span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:12px}
.track span::before{content:"";width:5px;height:5px;background:var(--seal);flex:0 0 auto}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,24px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);padding:24px 22px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--ink-3)}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--ink-2);font-size:15px}
.card .zh{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;font-weight:500}
.card .n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--seal-ink);display:block;margin-bottom:12px}

/* stat */
.stat{background:var(--surface);border:1px solid var(--rule);padding:22px 20px}
.stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4.6vw,42px);letter-spacing:-.03em;color:var(--seal-ink);line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.stat i{display:block;font-style:normal;font-family:var(--f-cn);font-size:12.5px;color:var(--ink-3);margin-top:3px}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.tl-item{position:relative;padding-block:20px;border-top:1px solid var(--rule-soft)}
.tl-item:first-child{border-top:0;padding-top:0}
.tl-item::before{content:"";position:absolute;left:-27px;top:26px;width:13px;height:13px;border:2px solid var(--rule);background:var(--ground);border-radius:50%}
.tl-item:first-child::before{top:6px}
.tl-item.now::before{border-color:var(--seal);background:var(--seal);box-shadow:0 0 0 4px var(--seal-wash)}
.tl-date{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tl-item h3{margin:6px 0 0;font-size:17.5px}
.tl-item h3 .zh{font-size:.85em;color:var(--ink-2);margin-left:.4em}
.tl-item p{margin:7px 0 0;color:var(--ink-2);font-size:15px;max-width:62ch}
.tag{display:inline-block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border:1px solid currentColor;margin-right:9px;vertical-align:2px}
.tag.live{color:var(--seal-ink)}.tag.soon{color:var(--warn)}.tag.next{color:var(--ink-3)}

/* ---------- price tiers ---------- */
.tiers{display:grid;gap:0;border:1px solid var(--rule);background:var(--surface)}
.tier{display:grid;grid-template-columns:1fr auto;gap:6px 28px;padding:26px 24px;border-top:1px solid var(--rule);transition:background .3s var(--ease)}
.tier:first-child{border-top:0}
.tier:hover{background:var(--surface-2)}
.tier h3{grid-column:1;grid-row:1}
.tier h3 .zh{font-size:.72em;color:var(--ink-3);margin-left:.5em}
.tier .for{grid-column:1;grid-row:2;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 0}
.tier ul{grid-column:1;grid-row:3;margin:12px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:15px}
.tier li{position:relative;padding-left:18px;margin-top:5px}
.tier li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--seal)}
.tier .price{grid-column:2;grid-row:1 / span 3;text-align:right;white-space:nowrap;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3)}
.tier .price b{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.025em;color:var(--ink)}
.offer{margin-top:24px;border:2px solid var(--jade);background:var(--jade-wash);padding:24px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.offer h3{font-size:20px}
.offer p{margin:8px 0 0;color:var(--ink-2);font-size:15px;max-width:48ch}
.offer .p{font-family:var(--f-mono);font-size:13px;color:var(--jade);text-align:right;white-space:nowrap}
.offer .p b{display:block;font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.offer .p s{opacity:.55}

/* ---------- quote / people ---------- */
.pull{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,3.4vw,30px);line-height:1.24;letter-spacing:-.02em;max-width:24ch}
.pull span{color:var(--seal-ink)}
.person{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.avatar{flex:0 0 auto;width:76px;height:76px;border:2px solid var(--seal);color:var(--seal-ink);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:27px;letter-spacing:-.02em}
.person-body{flex:1 1 280px;min-width:0}
.person-body .role{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:5px 0 12px}
.person-body p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:58ch}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);background:var(--surface)}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--seal-ink)}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:20px;color:var(--seal-ink);flex:0 0 auto;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 22px;color:var(--ink-2);font-size:15.5px;max-width:70ch}
.faq .a p{margin:0 0 10px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- cta strip (mindig sotet, temafuggetlen) ---------- */
.strip{background:#0F1418;color:#E9EDF0;border-top:1px solid #0F1418}
.strip h2{color:#FFFFFF}
.strip p{color:#B6C0C7}
.strip .kicker{color:#7E8B94}
.strip .btn{background:#E0143A;border-color:#E0143A;color:#fff}
.strip .btn:hover{background:transparent;color:#FF8095;border-color:#FF8095}
.strip .btn.ghost{background:transparent;color:#E9EDF0;border-color:#49545C}
.strip .btn.ghost:hover{border-color:#FF8095;color:#FF8095}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--rule);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-top:1px solid var(--rule-soft);vertical-align:top}
th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-top:0;background:var(--surface-2)}
td b{font-family:var(--f-display);font-weight:700}

/* ---------- footer ---------- */
footer.site{background:var(--surface-2);border-top:1px solid var(--rule);padding-block:44px 30px;margin-top:0}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 32px;margin-bottom:34px}
footer.site h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
footer.site ul{margin:0;padding:0;list-style:none}
footer.site li{margin-bottom:8px}
footer.site a{color:var(--ink-2);text-decoration:none;font-size:14.5px;border-bottom:1px solid transparent}
footer.site a:hover{color:var(--seal-ink);border-bottom-color:currentColor}
footer.site .addr{font-size:14.5px;color:var(--ink-2);font-style:normal}
.f-legal{border-top:1px solid var(--rule);padding-top:22px;font-family:var(--f-mono);font-size:11px;line-height:1.75;color:var(--ink-3);max-width:90ch}
.f-sig{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--ink-2);margin-bottom:10px;letter-spacing:-.01em}
.f-sig b{color:var(--seal-ink)}
.todo{display:inline-block;border:1px dashed var(--warn);color:var(--warn);padding:0 7px;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em}

a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .counter{max-width:320px}
}
@media (max-width:720px){
  .wrap{padding-inline:18px}
  .burger{display:block}
  nav.main{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--rule);padding:8px 18px 18px;transform:translateY(-120%);transition:transform .35s var(--ease);box-shadow:var(--shadow)}
  header.site.open nav.main{transform:none}
  nav.main a{padding-block:13px;border-bottom:1px solid var(--rule-soft);font-size:16px}
  nav.main a::after{display:none}
  nav.main .btn{margin-top:14px;text-align:center}
  .tier{grid-template-columns:1fr}
  .tier h3,.tier .for,.tier ul,.tier .price{grid-column:1;grid-row:auto}
  .tier .price{text-align:left;margin-top:16px}
  .offer .p{text-align:left}
  .tl{padding-left:22px}
  .tl-item::before{left:-22px;width:11px;height:11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  h1 .line>span{transform:none}
  .h1-cn{opacity:1}
}

/* CJK gombok: a kinai irasjegyek magasabbak, kell egy kis levego */
body.zh-page .btn{padding:12px 19px;line-height:1.5}
body.zh-page .btn.big{padding:16px 27px;line-height:1.5}
body.zh-page nav.main a.lang{padding:7px 12px}