:root{ --brand:#f5a623; --ink:#0f2546; --ink2:#0a1c34; --text:#111827; --muted:#4b5563; --border:#e7ebf3; --bg:#f7f8fb; --whatsapp:#25D366; --viber:#7360F2; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans"; color:var(--text); background:var(--bg); line-height:1.6; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block;border-radius:14px} .container{max-width:1280px;margin:0 auto;padding:24px} header{position:static;background:#ffffffee;border-bottom:1px solid var(--border);backdrop-filter: blur(1px);z-index:20} .brand{display:flex;align-items:center;gap:10px;font-weight:900} .brand .logo{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:8px;border:2px solid var(--brand);color:var(--brand)} nav{display:flex;gap:22px;align-items:center} .menu{display:flex;gap:18px} .menu-btn{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px} .nav-link{color:#374151;font-weight:600} .nav-link:hover{color:#111827} @media (max-width:860px){ .menu-btn{display:block} .menu{display:none;position:absolute;top:64px;right:16px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(28,44,64,.12);padding:12px} .menu.open{display:flex;flex-direction:column;min-width:180px} } .hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding:24px 0 8px} .h1{font-size:44px;line-height:1.1;margin:8px 0 10px;font-weight:900} .lead{color:var(--muted);font-size:18px;max-width:540px} .eyebrow{color:var(--brand);font-weight:800;letter-spacing:.02em} @media (max-width:860px){.hero{grid-template-columns:1fr}.h1{font-size:36px}} .section{padding:22px 0 12px} .section h2{font-size:30px;margin:0 0 6px;font-weight:900} .section p{color:var(--muted);margin:0 0 18px} .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:760px){ .thumbs{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .thumbs{grid-template-columns:1fr} } .pricing{margin:18px 0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:16px;overflow:hidden;border:1px solid #e8ebf1} .price{background:linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%);color:#eaf2ff;padding:24px 20px;display:flex;flex-direction:column;gap:4px;min-height:120px} .price strong{font-size:16px;letter-spacing:.2px} .price .muted{opacity:.9} .price .val{font-size:24px;font-weight:900;margin-top:auto} .price + .price{border-left:1px solid rgba(255,255,255,.12)} @media (max-width: 860px){ .pricing{grid-template-columns:1fr 1fr} } @media (max-width:540px){ .pricing{grid-template-columns:1fr} } .row{display:flex;gap:14px;flex-wrap:wrap} .tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:12px} footer{padding:36px 0;color:#6b7280;border-top:1px solid var(--border);margin-top:24px} .footer-icons{display:flex;gap:10px;align-items:center} .icon{width:22px;height:22px;display:inline-block} .icon.whatsapp{color:#25D366} .icon.viber{color:#7360F2} .whatsapp-fab{position:fixed;right:18px;bottom:18px;background:var(--whatsapp);color:#fff;border:none;border-radius:999px;padding:12px 16px 12px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(12,48,24,.32);font-weight:800;z-index:40} .whatsapp-fab span{white-space:nowrap} .whatsapp-fab svg{width:22px;height:22px;display:block} .brand .logo-img{ height:clamp(32px, 3.6vw, 48px); width:auto; display:block; border-radius:8px; object-fit:contain; } .brand:hover{opacity:.96} .hero-logo{ max-height:84px; height:auto; width:auto; image-rendering:auto; } .fab-stack{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:50; } .fab{ display:flex; align-items:center; gap:10px; border:none; border-radius:999px; padding:12px 16px 12px 12px; color:#fff; font-weight:800; box-shadow:0 12px 30px rgba(0,0,0,.25); text-decoration:none; } .fab span{ white-space:nowrap } .fab svg{ width:22px; height:22px; display:block } .fab.telegram{ background:#0088cc } .fab.viber{ background:#7360F2 } .fab.whatsapp{ background:#25D366 } .btn-paypal{ display:inline-flex; align-items:center; gap:10px; background:#003087; color:#fff; border-radius:12px; padding:12px 16px; font-weight:800; text-decoration:none; border:1px solid rgba(0,0,0,.05); } .btn-paypal svg{ width:24px; height:24px; display:block } .btn-row{ margin-top:16px } .btn-paypal.small{ padding:10px 12px; border-radius:10px; font-weight:800; display:inline-flex; align-items:center; gap:8px; } .price .btn-paypal{ margin-top:10px } .section .pricing ~ .pricing { display:none !important; } body{ background-color:#eef2f7; background-image: radial-gradient(900px 480px at 12% -10%, rgba(245,166,35,.08), rgba(245,166,35,0) 43%), radial-gradient(900px 520px at 88% -20%, rgba(15,37,70,.12), rgba(15,37,70,0) 55%), linear-gradient(180deg, #f4f7fc 0%, #eef2f7 100%); } html{ background:#eef2f7; } body{ background: radial-gradient(900px 480px at 12% -10%, rgba(245,166,35,.10), rgba(245,166,35,0) 43%), radial-gradient(900px 520px at 88% -20%, rgba(15,37,70,.15), rgba(15,37,70,0) 55%), linear-gradient(180deg, #f4f7fc 0%, #eef2f7 100%) !important; } :root{ --bg:#0b1220; --panel:#0f1b33; --border:#1f2a3c; --text:#e6ecf3; --muted:#a9b4c4; } html{ background:var(--bg); } body{ color:var(--text); background: radial-gradient(900px 520px at 88% -20%, rgba(21,36,66,.45), rgba(21,36,66,0) 55%), radial-gradient(900px 480px at 12% -10%, rgba(245,166,35,.12), rgba(245,166,35,0) 43%), linear-gradient(180deg, #0b1220 0%, #0b1426 40%, #0b1220 100%) !important; } header{ background:rgba(10,16,28,.8); border-bottom:1px solid var(--border); } .nav-link{ color:#cbd5e1; } .nav-link:hover{ color:#fff; } .section p{ color:var(--muted); } .tag{ background:rgba(255,255,255,.06); border:1px solid var(--border); color:#dbe4f2; } footer{ color:#99a4b5; border-top:1px solid var(--border); } .container img{ box-shadow: 0 12px 24px rgba(0,0,0,.24); } .pricing{ border:1px solid rgba(255,255,255,.06); } .price + .price{ border-left:1px solid rgba(255,255,255,.08) } .btn-paypal{ box-shadow: 0 4px 14px rgba(0,0,0,.35); } .logo-strip{ background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); display:flex; flex-wrap:wrap; gap:18px; justify-content:center; padding:10px 0; } .logo-strip img.logo-tile{ height:34px; width:auto; display:block; object-fit:contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.24)); opacity:.95; } @media (max-width:560px){ .logo-strip{ gap:12px; padding:8px 0 } .logo-strip img.logo-tile{ height:28px } } .logo-strip.marquee{ background: rgba(255,255,255,.04); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow:hidden; position:relative; } .logo-strip.bottom{ margin-top: 16px; } .logo-strip .track{ display:flex; align-items:center; gap:18px; padding:10px 0; will-change: transform; animation: scroll-x 28s linear infinite; } .logo-strip img.logo-tile{ height:34px; width:auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.24)); opacity:.95 } @keyframes scroll-x{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } } .side-strip{ position:fixed; top:0; bottom:0; width:72px; z-index:1; display:flex; justify-content:center; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-left: 1px solid var(--border); border-right: 1px solid var(--border); overflow:hidden; } .side-strip.left{ left:0 } .side-strip.right{ right:0 } .side-strip .vtrack{ display:flex; flex-direction:column; gap:16px; padding:12px 0; will-change: transform; animation: scroll-y 36s linear infinite; } .side-strip img.logo-tile{ height:32px; width:auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.24)); opacity:.9 } @keyframes scroll-y{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-50%) } } @media (max-width: 1100px){ .side-strip{ display:none } } .logo-strip{ padding:18px 0; } .logo-strip .track{ gap:28px; } .logo-strip img.logo-tile{ height:64px; } .side-strip{ width:144px; } .side-strip .vtrack{ gap:24px; padding:18px 0; } .side-strip img.logo-tile{ height:56px; } @media (max-width: 1200px){ .side-strip{ display:none; } } @media (max-width: 560px){ .logo-strip img.logo-tile{ height:42px; } .logo-strip{ padding:12px 0; } } .side-strip{ width:288px; } .side-strip .vtrack{ gap:32px; padding:24px 0; } .side-strip img.logo-tile{ height:96px; } .side-strip{ width:360px; } .side-strip .vtrack{ gap:36px; padding:28px 0; } .side-strip img.logo-tile{ height:112px; } :root{ --text:#FFFFFF; --muted:#FFDE7A; } html, body, .container, footer, .section p, .lead, .eyebrow, h1,h2,h3,h4,h5,h6, .brand span, .nav-link, a { color: var(--text); } .nav-link:hover, a:hover{ color:#FFE082; } .price{ color:#FFFFFF; } .price .muted{ color:#FFDE7A; opacity:1; } .tag{ color:#FFFFFF; } .logo-strip, .side-strip{ color:#FFFFFF; } .btn-paypal span, .fab.telegram span, .fab.viber span, .fab.whatsapp span{ color:#fff; } :root{ --#FFFFFF:#FFFFFF; --text:#FFFFFF; --muted:#FFDE7A; --bg:#000000; } html{ background:#000; } body{ color:var(--text); background: radial-gradient(900px 520px at 88% -20%, rgba(245,166,35,.10), rgba(245,166,35,0) 55%), linear-gradient(180deg, #0a0a0a 0%, #000000 70%) !important; } html, body, .container, footer, .section p, .lead, .eyebrow, h1,h2,h3,h4,h5,h6, .brand span, .nav-link, a, .tag, .price, .price .muted { color: var(--text) !important; } .fab, .btn-paypal { color: var(--#FFFFFF) !important; } .fab svg path, .btn-paypal svg path { fill: currentColor !important; } header, footer, .tag, .pricing{ border-color: rgba(255,255,255,.12) !important; } .logo-strip.marquee, .logo-strip, .side-strip{ border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.06); } .price strong, .price .val { color: var(--#FFFFFF) !important; } } .btn-paypal:hover svg path{ fill: #0b0b0b !important; } .price .btn-paypal{ margin-top:12px } .btn-paypal{ background: #0f1116 !important; color: var(--#FFFFFF) !important; border: 1px solid rgba(255,210,74,.28) !important; border-radius: 999px !important; box-shadow: 0 4px 12px rgba(0,0,0,.35) !important; } .btn-paypal span{ color: inherit !important; } .btn-paypal svg path{ fill: currentColor !important; } .price .btn-paypal{ margin-top:12px } .btn-paypal:hover, .btn-paypal:focus{ background: var(--#FFFFFF) !important; color: #0b0b0b !important; border-color: var(--#FFFFFF) !important; box-shadow: 0 6px 16px rgba(0,0,0,.45) !important; } .btn-paypal:hover svg path, .btn-paypal:focus svg path{ fill: #0b0b0b !important; } .pricing{ border:1px solid rgba(255,255,255,.10) !important; } .price{ background: linear-gradient(180deg, #11151d 0%, #0b0e14 100%) !important; color: var(--text) !important; } .price + .price{ border-left:1px solid rgba(255,255,255,.10) !important; } .hero-logos{ display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:24px; align-items:center; margin: 8px 0 12px 0; } .hero-logos .hero-logo{ max-height:84px; height:auto; width:auto; image-rendering:auto; } @media (max-width:720px){ .hero-logos{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .hero-logos{ grid-template-columns:1fr; } } .row.contacts-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px } .btn-cta{ display:inline-flex; align-items:center; gap:10px; background:#0f1116; color:var(--#FFFFFF); border:1px solid rgba(255,210,74,.28); border-radius:999px; padding:12px 16px; font-weight:800; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.35); } .btn-cta svg{ width:20px; height:20px; display:block } .btn-cta:hover, .btn-cta:focus{background: transparent !important;color: var(--#FFFFFF) !important;border-color: rgba(255,210,74,.65) !important;box-shadow: 0 6px 16px rgba(0,0,0,.45) !important;} .btn-cta:hover svg path, .btn-cta:focus svg path{ fill: currentColor !important; } body{ position:relative; } body::before{ content:""; position:fixed; inset:-8px; pointer-events:none; z-index:0; background: radial-gradient(900px 140px at 50% -60px, rgba(255,190,64,.55), rgba(255,140,0,0) 60%), radial-gradient(900px 140px at 50% calc(100% + 60px), rgba(255,190,64,.55), rgba(255,140,0,0) 60%), radial-gradient(140px 900px at -60px 50%, rgba(255,190,64,.55), rgba(255,140,0,0) 60%), radial-gradient(140px 900px at calc(100% + 60px) 50%, rgba(255,190,64,.55), rgba(255,140,0,0) 60%), radial-gradient(280px 220px at -40px -40px, rgba(255,120,0,.45), rgba(255,120,0,0) 70%), radial-gradient(280px 220px at calc(100% + 40px) -40px, rgba(255,120,0,.45), rgba(255,120,0,0) 70%), radial-gradient(280px 220px at -40px calc(100% + 40px), rgba(255,120,0,.45), rgba(255,120,0,0) 70%), radial-gradient(280px 220px at calc(100% + 40px) calc(100% + 40px), rgba(255,120,0,.45), rgba(255,120,0,0) 70%); filter: blur(10px) saturate(135%); mix-blend-mode: screen; opacity:.55; animation: flame-flicker 4.5s ease-in-out infinite alternate; } @keyframes flame-flicker{ 0%{ opacity:.45; transform: scale(1.00); filter: blur(9px) saturate(120%); } 100%{ opacity:.75; transform: scale(1.02); filter: blur(12px) saturate(150%); } } body{ position:relative; } body::before{ content:""; position:fixed; inset:-12px; pointer-events:none; z-index:0; background: radial-gradient(900px 160px at 50% -80px, rgba(255,190,64,.75), rgba(255,140,0,0) 60%), radial-gradient(900px 160px at 50% calc(100% + 80px), rgba(255,190,64,.75), rgba(255,140,0,0) 60%), radial-gradient(160px 900px at -80px 50%, rgba(255,150,40,.6), rgba(255,120,0,0) 60%), radial-gradient(160px 900px at calc(100% + 80px) 50%, rgba(255,150,40,.6), rgba(255,120,0,0) 60%), radial-gradient(320px 240px at -60px -60px, rgba(255,120,0,.55), rgba(255,120,0,0) 70%), radial-gradient(320px 240px at calc(100% + 60px) -60px, rgba(255,120,0,.55), rgba(255,120,0,0) 70%), radial-gradient(320px 240px at -60px calc(100% + 60px), rgba(255,120,0,.55), rgba(255,120,0,0) 70%), radial-gradient(320px 240px at calc(100% + 60px) calc(100% + 60px), rgba(255,120,0,.55), rgba(255,120,0,0) 70%); filter: blur(12px) saturate(140%); mix-blend-mode: screen; opacity:.75; animation: flame-flicker 4.5s ease-in-out infinite alternate; } body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; box-shadow: inset 0 0 120px rgba(255,180,0,.28), inset 0 0 260px rgba(255,120,0,.16); border-radius:2px; } html{ background:#000; } html::before{ content:""; position:fixed; left:-10%; right:-10%; top:-20%; bottom:-20%; pointer-events:none; z-index:0; background: radial-gradient(1000px 380px at 15% 115%, rgba(255,170,40,.18), rgba(255,140,0,0) 65%), radial-gradient(900px 320px at 50% 118%, rgba(255,190,64,.22), rgba(255,120,0,0) 60%), radial-gradient(1000px 380px at 85% 115%, rgba(255,160,30,.18), rgba(255,120,0,0) 65%), radial-gradient(600px 260px at 30% 112%, rgba(255,120,0,.16), rgba(255,120,0,0) 60%), radial-gradient(600px 260px at 70% 112%, rgba(255,120,0,.16), rgba(255,120,0,0) 60%); filter: blur(18px) saturate(135%); opacity:.35; animation: flame-field-rise 18s ease-in-out infinite alternate; } @keyframes flame-field-rise{ 0%{ transform: translateY(0) scale(1.00); opacity:.32; } 100%{ transform: translateY(-2.5%) scale(1.02); opacity:.42; } } main, .container, section{ position:relative; z-index:1 } html{ background:#000 !important; } body{ background:#000 !important; } html::before, body::before, body::after{ content:none !important; display:none !important; } .dropdown{ position:relative } .dropdown-toggle{ display:flex; align-items:center; gap:6px; background:transparent; border:none; cursor:pointer; font-weight:700; color:var(--text); } .dropdown-toggle:hover{ color:#FFE082 } .dropdown .chev{ width:14px; height:14px; display:block } .dropdown-menu{ position:absolute; top:140%; right:0; min-width:220px; background:#0b1220; border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.35); padding:8px; display:none; z-index: 999; } .dropdown.open .dropdown-menu{ display:block } .dropdown-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; color:#FFFFFF; text-decoration:none; } .dropdown-item:hover{ background:rgba(255,255,255,.06) } .dropdown-item .dur{ color:#FFDE7A; font-size:12px; opacity:.9 } @media (max-width:860px){ .dropdown-menu{ position:relative; top:auto; right:auto; box-shadow:none; border-radius:10px; } } header{ background: rgba(0,0,0,.92) !important; border-bottom:1px solid var(--border) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35) } .menu{ background:#000 !important; border:1px solid var(--border) !important; } .dropdown-menu{ background:#000 !important; border:1px solid var(--border) !important; } .menu-btn{ background:#000 !important; border:1px solid var(--border) !important; } .faq-list{ display:grid; gap:12px; margin-top:12px } details.faq{ background:#0f1116; border:1px solid rgba(255,210,74,.28); border-radius:14px; padding:10px 12px; } details.faq[open]{ background:#0f1116; border-color: rgba(255,210,74,.45) } details.faq > summary{ list-style:none; cursor:pointer; font-weight:800; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:12px; } details.faq > summary::-webkit-details-marker{ display:none } details.faq .answer{ color:var(--muted); padding:8px 2px 4px 2px } .faq-section{ margin-top:32px; } .faq-section h2{ margin-bottom:6px; } .faq-grid{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(220px, 1fr)); } @media (max-width: 860px){ .faq-grid{ grid-template-columns:1fr; } } .faq-card{ background:#0f1116; border:1px solid rgba(255,210,74,.28); border-radius:24px; padding:14px 16px; box-shadow: 0 8px 22px rgba(0,0,0,.35); } .faq-card .q{ font-weight:900; color:var(--text); margin-bottom:6px } .faq-card .a{ color:var(--muted) } .faq-section, .faq-grid, .faq-card{ position:relative; z-index:2 } @media (min-width: 1200px) and (max-width: 1499px){ .faq-section{ padding-left: 300px; padding-right: 300px; } } @media (min-width: 1500px){ .faq-section{ padding-left: 400px; padding-right: 400px; } } :root{ --content-max: 1180px; } @media (min-width: 1200px){ .side-strip{ width: clamp(180px, calc((100vw - var(--content-max))/2), 520px) !important; } } @media (min-width: 1200px){ .faq-section{ padding-left:24px !important; padding-right:24px !important; } } @media (min-width: 1200px){ .side-strip{ width: clamp(200px, calc((100vw - var(--content-max))/2), 520px) !important; } .faq-section{ padding-left: clamp(216px, calc((100vw - var(--content-max))/2 + 16px), 536px) !important; padding-right: clamp(216px, calc((100vw - var(--content-max))/2 + 16px), 536px) !important; } } .faq-section, .faq-grid, .faq-card{ position:relative; z-index:2 } :root{ --content-max: 1180px; } @media (min-width:1200px){ .side-strip{ width: clamp(200px, calc((100vw - var(--content-max))/2), 520px) !important; } .faq-section{ padding-left: calc((100vw - var(--content-max))/2 + 16px); padding-right: calc((100vw - var(--content-max))/2 + 16px); } } .faq-section, .faq-grid, .faq-card{ position:relative; z-index:2 } .nav-cta{ display:inline-flex; align-items:center; gap:8px; background:#0f1116; color:var(--#FFFFFF); border:1px solid rgba(255,210,74,.28); border-radius:999px; padding:8px 14px; font-weight:800; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.35); } .nav-cta:hover{ background:var(--#FFFFFF); color:#0b0b0b; border-color:var(--#FFFFFF); box-shadow:0 6px 16px rgba(0,0,0,.45) } .nav-cta svg{ width:18px; height:18px; display:block } .nav-cta svg path{ fill: currentColor } @media (max-width: 860px){ .nav-cta{ display:inline-flex; width:100%; justify-content:center; margin-top:6px } } header{ z-index: 1000; position: sticky; top: 0; } header .menu{ display:flex; align-items:center; justify-content:center; gap:16px; } .header .menu .nav-link{ font-weight:800 } .nav-link, .dropdown-toggle, .nav-cta{ font-size: 1.08rem; } @media (max-width: 860px){ .nav-link, .dropdown-toggle, .nav-cta{ font-size: 1rem; } } footer{ text-align:center; } footer .container{ justify-content:center !important; gap:10px } footer .container > div:first-child{ font-size: 1.08rem; font-weight: 800; letter-spacing: .2px; } .pricing{ background: transparent !important; border-color: rgba(255,255,255,.10) !important; } .pricing .price, .price{ background: transparent !important; border: 1px solid rgba(255,255,255,.10) !important; } .price + .price{ border-left: 1px solid rgba(255,255,255,.10) !important; } .price h3, .price .title, .price .val{ color: var(--text) !important; } .apps-link{ font-weight:800; } .nav-cta{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; color:var(--text) !important; } .nav-cta:hover{ background:transparent !important; color:#FFE082 !important; } .nav-cta svg{ display:none !important; } .apps-link::after{ content:"↗"; font-size:.85em; margin-left:.35em; opacity:.85; } .footer-cta{ display:inline-flex; align-items:center; gap:8px; background:#0f1116; color:var(--#FFFFFF); border:1px solid rgba(255,210,74,.28); border-radius:999px; padding:10px 16px; font-weight:800; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.35); } .footer-cta:hover{ background:var(--#FFFFFF); color:#0b0b0b; border-color:var(--#FFFFFF); box-shadow:0 6px 16px rgba(0,0,0,.45) } :root{ --bottom-tape-h: 60px; } .logo-strip.bottom{ position: fixed !important; left: 0; right: 0; bottom: 0; margin: 0 !important; z-index: 60; pointer-events: none; backdrop-filter: blur(1px); } body{ padding-bottom: var(--bottom-tape-h); } footer{ position: relative; z-index: 2; } @media (max-width: 480px){ :root{ --bottom-tape-h: 56px; } } .footer-social{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin: 6px 0 8px } .foot-fab{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; font-weight:800; text-decoration:none; font-size:.95rem; line-height:1; color:#fff; } .foot-fab.telegram{ background:#0088cc } .foot-fab.viber{ background:#7360F2 } .foot-fab.whatsapp{ background:#25D366; color:#0b0b0b } .fab-stack{ display:none !important; } .logo-strip.bottom, .logo-strip { display:none !important; visibility:hidden !important; height:0 !important; } body{ padding-bottom: 0 !important; } .side-strip{ background:#000 !important; border-left:none !important; border-right:none !important; } .side-strip .vtrack{ gap:40px !important; padding:30px 0 !important; } .side-strip img.logo-tile{ height:128px !important; width:auto !important; } :root{ --nav-logo-h: 56px; } .brand .logo-img{ height: var(--nav-logo-h) !important; width:auto; display:block } header .brand, .navbar .brand{ display:flex; align-items:center } header, .navbar{ min-height: calc(var(--nav-logo-h) + 16px) } @media (max-width: 640px){ :root{ --nav-logo-h: 48px; } } .iptv-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .iptv-gallery img { width: 100%; transition: transform 0.3s ease; border-radius: 8px; } .iptv-gallery img:hover { transform: scale(1.05); } .trust-badge{ transition: transform .2s ease, box-shadow .2s ease } .trust-badge:hover{ transform: translateY(-2px) scale(1.02); box-shadow:0 6px 18px rgba(0,0,0,.25) } .tab-ico{ transition: color .2s ease, opacity .2s ease } .testimonials .t-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); } .testimonials .t-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:16px; } .testimonials .t-card p{ margin:0 0 8px; font-style:italic } .testimonials .t-user{ opacity:.8; font-weight:700 } @media (max-width:920px){ .testimonials .t-grid{ grid-template-columns:1fr 1fr } } @media (max-width:560px){ .testimonials .t-grid{ grid-template-columns:1fr } } .tabs-panels{ position:relative } .tab-panel{ opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease, visibility .25s step-end; } .tab-panel.show{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .25s ease, transform .25s ease, visibility 0s step-start; } .brand img{ height:48px; width:auto; image-rendering:auto; } @media (min-width:1000px){ .brand img{ height:56px; } } ul.tabs li a { display: flex; align-items: center; padding: 10px 14px; border: 2px solid transparent; border-radius: 6px 6px 0 0; text-decoration: none; font-weight: 600; transition: background 0.25s, color 0.25s, border-color 0.25s; } ul.tabs li a.active-tab { color: #fff; } ul.tabs li a.active-iptv { background-color: #d4af37; border-color: #d4af37; } ul.tabs li a.active-forex { background-color: #20c997; border-color: #20c997; } ul.tabs li a:not(.active-tab) { background-color: transparent; border-color: #ccc; color: #333; } @media (max-width: 860px) { .sticky-whatsapp { position: fixed; bottom: 16px; right: 16px; background-color: #25d366; color: white; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 999; text-decoration: none; } .sticky-whatsapp svg { width: 28px; height: 28px; fill: white; } } .pricing, .pricing * { color: #fff; } .btn-paypal { background: #0070ba !important; color: #ffffff !important; border: none !important; box-shadow: 0 6px 16px rgba(0,112,186,0.35); } .btn-paypal.small { padding: 10px 14px; border-radius: 999px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; } .btn-paypal svg path { fill: #ffffff !important; } .btn-paypal:hover { filter: brightness(1.05); transform: translateY(-1px); } .cta-big{ margin: 28px 0; padding: 22px; background: rgba(255,210,74,.10); border: 1px solid rgba(255,210,74,.35); border-radius: 14px; text-align: center; } .cta-big h2{ margin: 0 0 6px; font-size: clamp(20px, 3.2vw, 28px); color: #fff; } .cta-big p{ margin: 0 0 14px; color: #eaeaea; opacity: .9; } .btn-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 12px 18px; border-radius: 12px; font-weight: 800; text-decoration: none; background: #25D366; color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.35); transition: transform .2s ease, filter .2s ease; } .btn-cta:hover{ transform: translateY(-1px); filter: brightness(1.06); } .btn-cta.ghost{ background: transparent; border: 2px solid #25D366; color: #fff; box-shadow: none; } .cta-small{ margin: 24px 0 10px; padding: 14px 16px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; background: #0f1116; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #fff; } .cta-small span{ font-weight: 800; } .pricing .price strong, .pricing .price .muted, .pricing .price .val { color:#ffffff !important; } .footer-social .foot-fab { color:#ffffff !important; font-weight:800; font-size:16px; padding:10px 18px; border-radius:999px; } .footer-social .foot-fab:hover{ transform:scale(1.06); filter:brightness(1.1); transition:transform .2s ease, filter .2s ease; } .pricing, .pricing * { color:#ffffff !important; } .btn-paypal, .btn-skrill, .btn-neteller { color:#ffffff !important; } .alt-pay{ display:flex; flex-direction:column; gap:10px; margin-top:10px; } .alt-pay a{ display:inline-flex; align-items:center; justify-content:center; width:100%; padding:14px 18px; border-radius:12px; font-weight:800; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.25); transition:transform .2s ease, filter .2s ease; } .btn-skrill{ background:#7b3fe4; } .btn-neteller{ background:#84BD00; } .alt-pay a:hover{ transform:translateY(-1px); filter:brightness(1.05); } .top-demo-banner{ width:100%; background:#d4af37; color:#ffffff !important; text-align:center; padding:12px 10px; font-size:clamp(16px, 2.2vw, 22px); font-weight:800; letter-spacing:0.2px; display:flex; gap:10px; justify-content:center; align-items:center; border-bottom:1px solid rgba(0,0,0,.25); } .top-demo-banner .gift{ display:inline-block; font-size:22px; margin:0 6px; animation:pulseGift .7s ease-in-out infinite; transform-origin:center; } .top-demo-banner .gift.right{ order:3; } @keyframes pulseGift{ 0%{ transform:scale(1);} 50%{ transform:scale(1.14);} 100%{ transform:scale(1);} } .top-demo-banner{ color:#000 !important; } .top-demo-banner .gift{ font-size:30px; animation:pulseGift .55s ease-in-out infinite; margin:0 8px; } .cta-big .gift{ font-size:30px; animation:pulseGift .55s ease-in-out infinite; margin:0 8px; } .cta-big .btn-cta{ color:#fff !important; } .cta-small .gift{ font-size:26px; animation:pulseGift .55s ease-in-out infinite; margin:0 8px; } .cta-small .btn-cta{ color:#fff !important; border-color:#25D366; } .btn-cta, .btn-cta *, .btn-skrill, .btn-skrill *, .btn-neteller, .btn-neteller *{ color:#fff !important; } @keyframes pulseGift{ 0%{ transform:scale(1);} 50%{ transform:scale(1.18);} 100%{ transform:scale(1);} } @keyframes pulseGift { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .pulse-gift { animation: pulseGift 0.8s infinite; display: inline-block; } .cta-small{ display:flex; align-items:center; justify-content:center; gap:12px; } .cta-small .gift{ font-size:22px; animation:pulseGift .7s ease-in-out infinite; } .cta-small .gift.right{ order:3; } @keyframes pulseGift{ 0%{transform:scale(1);} 50%{transform:scale(1.14);} 100%{transform:scale(1);} } .cta-small{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 12px; } .cta-small .cta-small-text{ color:#fff; font-weight:800; } .cta-small .gift{ font-size:22px; line-height:1; animation:pulseGift .7s ease-in-out infinite; } .cta-small .gift.right{ order:3; } .cta-small .small-gift, .cta-small img[alt*="gift" i], .cta-small img[src*="gift-small" i]{ display:none !important; } .cta-small .btn-cta{ color:#fff !important; border-color:#25D366; } @keyframes pulseGift{ 0%{transform:scale(1);} 50%{transform:scale(1.14);} 100%{transform:scale(1);} } .contact-section.enhanced{ margin: 26px 0; padding: 22px; background: radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.92)); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; text-align: center; } .contact-title{ font-size: clamp(22px, 3vw, 30px); color:#FFFFFF; margin:0 0 6px; } .contact-sub{ color:#eaeaea; opacity:.95; margin:0 0 14px; } .contact-grid{ display:grid; grid-template-columns: repeat(4, minmax(160px,1fr)); gap:16px; align-items:stretch; justify-items:center; } @media (max-width: 980px){ .contact-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .contact-grid{ grid-template-columns: 1fr; } } .contact-card{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px 16px; border-radius:16px; text-decoration:none; font-weight:800; color:#fff; box-shadow: 0 10px 26px rgba(0,0,0,.25); position:relative; isolation:isolate; animation: cardEnter .6s ease both; } @keyframes cardEnter{ from{ transform: translateY(6px); opacity:0; } to{ transform:none; opacity:1; } } .contact-card svg{ width:28px; height:28px; } .contact-card.wa{ background:#25D366; } .contact-card.viber{ background:#7360F2; } .contact-card.tg{ background:#0088cc; } .contact-card.mail{ background:#EA4335; } @keyframes breathe { 0%{ transform: scale(1);} 50%{ transform: scale(1.065);} 100%{ transform: scale(1);} } @keyframes floaty { 0%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} 100%{ transform: translateY(0);} } .contact-card svg, .contact-card span{ animation: breathe 2s ease-in-out infinite, floaty 3s ease-in-out infinite; will-change: transform; } .contact-card:hover{ filter: brightness(1.08); box-shadow:0 14px 34px rgba(0,0,0,.35); transform: translateY(-2px); } .contact-card:hover svg, .contact-card:hover span{ animation-duration: 1.6s, 2.4s; } .contact-card span{ font-size:16px; } .contact-card span{ color:#ffffff !important; } .row.contacts-cta{ display:grid !important; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap:14px; align-items:stretch; } @media (max-width: 1100px){ .row.contacts-cta{ grid-template-columns: repeat(2, minmax(260px, 1fr)); } } @media (max-width: 560px){ .row.contacts-cta{ grid-template-columns: 1fr; } } .row.contacts-cta .btn-cta{ width:100%; justify-content:center; text-align:center; } .hero-logos{ display:flex; justify-content:center; align-items:center; gap:32px; margin:8px auto 14px; } .hero-logo{ width:64px; height:auto; opacity:.95; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); } .section > h2{ text-align:center; } .section > p{ text-align:center; max-width:900px; margin:6px auto 20px; } .contact-hero{ position:relative; max-width:1100px; margin:0 auto 12px; } .contact-hero h2, .contact-hero p{ text-align:center; } .contact-badge{ position:absolute; top:-6px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 26px rgba(0,0,0,.25); backdrop-filter: blur(1px); animation: floatY 3.6s ease-in-out infinite; z-index: 1; } .contact-badge.chat{ left: 24px; color:#25D366; } .contact-badge.secure{ right: 24px; color:#FFFFFF; animation-delay:.9s; } .badge-icon{ width:30px; height:30px; } @keyframes floatY { 0%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} 100%{ transform: translateY(0);} } @media (max-width: 1100px){ .contact-badge{ width:52px; height:52px; } .badge-icon{ width:24px; height:24px; } } @media (max-width: 860px){ .contact-badge{ display:none; } } nav a[href='cjenovnik.html']{ border-bottom:2px solid #FFFFFF; } .benefits-strip{ max-width: 1200px; margin: 14px auto 6px; padding: 10px 8px; display:grid; gap:22px; grid-template-columns: repeat(6, minmax(140px,1fr)); align-items:center; justify-items:start; } @media (max-width: 1100px){ .benefits-strip{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px){ .benefits-strip{ grid-template-columns: repeat(2, 1fr); } } .benefit{ display:flex; align-items:center; gap:12px; color:#EDEDED; } .benefit .b-ico{ width:34px; height:34px; color:#fff; opacity:.92 } .badge4k{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:28px; border-radius:6px; font-weight:900; color:#000; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25); } .benefit span{ line-height:1.2 } :root{ --text-primary: #F2F5F8; --text-secondary: #D8DEE8; --text-muted: #B7C0CD; } body, p, li, span, .section, .card, .plan, .footer, .benefit span, .contacts-cta, .contacts-cta *{ color: var(--text-primary) !important; } h1,h2,h3,h4,h5,h6{ color:#FFFFFF !important; text-shadow:none; } small,.muted,.per,.plan small,.trust,.trust *,.faq .a{ color: var(--text-secondary) !important; } .price{ color:#FFFFFF !important; } .btn, .btn *,.btn-cta,.btn-cta *,.btn-pay,.btn-pay *{ color:#FFFFFF !important; } nav a.active, nav a[href="cjenovnik.html"], nav a[href*="cjenovnik"].active{ border-bottom:2px solid #FFFFFF !important; } .demo-banner, .demo-banner *{ color:#FFFFFF !important; color:#FFFFFF !important;} html, body { background:#0b0d0f; } body{ position: relative; background: #0b0d0f; } body::before{ content:""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(110% 70% at 50% 0%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.76) 68%), rgba(0,0,0,.34); z-index: -1; } .section, .card, .plan, .contact-card, .benefits-strip, .faq-item, .dropdown-menu, .pricing-hero, .pricing-wrap .plan, .contacts-cta .btn-cta, header, nav, footer { backdrop-filter: blur(1px); } .section, .card, .plan, .contact-card, .faq-item, .dropdown-menu { background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.06); } .pricing-hero, .benefits-strip { background: transparent !important; border: 1px solid rgba(255,255,255,.05); } .btn, .btn-cta, .btn-pay { filter: none; } @media (max-width: 900px){ body{ background-attachment: scroll; background-position: center center; } } html, body { background:#0b0d0f !important; } body{ background-position: center top !important; background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: radial-gradient(110% 70% at 50% 0%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.76) 66%), rgba(0,0,0,.28); z-index:-1; } header{ background: rgba(0,0,0,.42) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .nav-link{ color:#f1f5f9 !important; } .menu{ background: rgba(0,0,0,.76) !important; } .logo-strip, .logo-strip.marquee, .side-strip{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } body, p, li, span, .section, .card, .plan, .contact-card, .benefit span, .trust, .trust *, .footer, .hero, .lead, .eyebrow, .nav-link, .menu a{ color: #FFFFFF !important; } h1, h2, h3, h4, h5, h6, .h1{ color:#FFFFFF !important; } .price, .per, small{ color:#FFFFFF !important; } html, body { background:#0b0d0f !important; } body{ background: radial-gradient(120% 80% at 50% 0%, rgba(18,24,38,.55) 0%, rgba(10,12,16,.95) 60%), linear-gradient(180deg, #0b0d0f 0%, #0a0c10 40%, #07080B 100%) !important; background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: radial-gradient(90% 50% at 50% 0%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.66) 80%); z-index:-1; } .demo-banner, .cta-small, .cta-top, .demo-bar { background: rgba(0,0,0,.45) !important; border: 1px solid rgba(255,255,255,.22) !important; color:#FFFFFF !important; } .demo-banner * , .cta-small * , .cta-top * , .demo-bar * { color:#FFFFFF !important; } .demo-banner .gift, .cta-small .gift { color:#FFFFFF !important; } .top-demo-banner, .demo-banner, .cta-top, .demo-bar{ background: rgba(0,0,0,.48) !important; color:#FFFFFF !important; border-bottom: 1px solid rgba(255,255,255,.18) !important; } .top-demo-banner *, .demo-banner *, .cta-top *, .demo-bar *{ color:#FFFFFF !important; } .top-demo-banner u{ text-decoration: underline; text-decoration-color:#FFFFFF !important; } .top-demo-banner,.demo-banner,.cta-top,.cta-bottom,.demo-bar,.demo-strip,.demo-bottom,.cta-fixed{ display:none !important; height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; visibility:hidden !important; opacity:0 !important; } .contact-hero{ position:relative; border:1px solid rgba(255,255,255,.10); background: radial-gradient(1100px 380px at 20% -10%, rgba(245,166,35,.12), rgba(0,0,0,0)), rgba(0,0,0,.35); border-radius:18px; padding:18px; box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); text-align:center; } .contact-hero h2{ margin:0 0 6px 0; } .contact-hero p{ color:var(--muted); margin:0 0 10px 0; } .row.contacts-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .btn-cta{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#fff; font-weight:800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .btn-cta:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); } .btn-cta svg{ width:20px; height:20px; display:block } .btn-cta.whatsapp{ border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.12); } .btn-cta.whatsapp:hover{ box-shadow: 0 12px 26px rgba(34,197,94,.28); } .btn-cta.viber{ border-color: rgba(115,96,242,.50); background: rgba(115,96,242,.12); } .btn-cta.viber:hover{ box-shadow: 0 12px 26px rgba(115,96,242,.28); } .btn-cta.telegram{ border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); } .btn-cta.telegram:hover{ box-shadow: 0 12px 26px rgba(59,130,246,.25); } .btn-cta.email{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.12); } .btn-cta.email:hover{ box-shadow: 0 12px 26px rgba(239,68,68,.25); } .trust-inline .chip, .trust-inline div{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); } .contact-section.enhanced{ border:1px solid rgba(255,255,255,.08); border-radius:16px; background: rgba(0,0,0,.35); } .contact-grid{ gap:12px; } .contact-card{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); } .floating-wa{ position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 54px; height: 54px; border-radius: 50%; display: none; align-items:center; justify-content:center; box-shadow: 0 12px 26px rgba(37,211,102,.35); background: #1f2937; border:1px solid rgba(37,211,102,.6); } .floating-wa svg{ width: 30px; height: 30px; } @media (max-width: 760px){ .floating-wa{ display:flex; } } .contact-grid{ grid-template-columns: repeat(4, minmax(120px,1fr)); } .contact-card.icon-only, .contact-card{ align-items:center; } .contact-card.icon-only{ background: transparent !important; box-shadow:none !important; padding:10px 6px; } .contact-card .icon-circle{ width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .contact-card .label{ font-weight:700; margin-top:6px; } .contact-card.icon-only svg{ width:34px; height:34px; } .contact-card.wa .icon-circle{ border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.10); box-shadow: inset 0 0 0 1px rgba(34,197,94,.12); } .contact-card.viber .icon-circle{ border-color: rgba(115,96,242,.55); background: rgba(115,96,242,.10); box-shadow: inset 0 0 0 1px rgba(115,96,242,.12); } .contact-card.tg .icon-circle{ border-color: rgba(59,130,246,.55); background: rgba(59,130,246,.10); box-shadow: inset 0 0 0 1px rgba(59,130,246,.12); } .contact-card.mail .icon-circle{ border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.10); box-shadow: inset 0 0 0 1px rgba(239,68,68,.12); } .contact-card:hover .icon-circle{ transform: translateY(-2px); } .contact-card.wa:hover .icon-circle{ box-shadow: 0 12px 26px rgba(34,197,94,.28), inset 0 0 0 1px rgba(34,197,94,.25); } .contact-card.viber:hover .icon-circle{ box-shadow: 0 12px 26px rgba(115,96,242,.28), inset 0 0 0 1px rgba(115,96,242,.25); } .contact-card.tg:hover .icon-circle{ box-shadow: 0 12px 26px rgba(59,130,246,.25), inset 0 0 0 1px rgba(59,130,246,.22); } .contact-card.mail:hover .icon-circle{ box-shadow: 0 12px 26px rgba(239,68,68,.25), inset 0 0 0 1px rgba(239,68,68,.22); } @media (max-width: 560px){ .contact-card .icon-circle{ width:86px; height:86px; } } .promo .split{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items:center; } .promo .split.reverse{ grid-template-columns: 1fr 1.1fr; } .promo .split.reverse .media{ order: 2; } .promo .split.reverse .text{ order: 1; } @media (max-width: 980px){ .promo .split, .promo .split.reverse{ grid-template-columns: 1fr; } .promo .split.reverse .media, .promo .split.reverse .text{ order: initial; } } .promo .mosaic{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:14px; background: radial-gradient(1200px 400px at 40% 20%, rgba(245,166,35,.10), rgba(0,0,0,0)); border:1px solid rgba(255,255,255,.10); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); } .promo .mosaic img{ width:100%; height:130px; object-fit:cover; display:block; border-radius:12px; } .promo .screen{ border-radius: 22px; overflow:hidden; border:1px solid rgba(255,255,255,.10); box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); } .promo .screen img{ width:100%; height:auto; display:block; } .promo .bullets{ margin:10px 0 0 0; padding-left:18px; line-height:1.6; color:var(--muted); } .promo .cta-row{ display:flex; gap:12px; margin-top:12px; } .promo .cta-row.center{ justify-content:center; } .gallery .gallery-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; } @media (max-width: 980px){ .gallery .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px){ .gallery .gallery-grid{ grid-template-columns: 1fr; } } .gallery .gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:#000; } .contact-grid{ grid-template-columns: repeat(4, minmax(120px,1fr)); gap:16px; } .contact-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 6px; background:transparent; border:none; box-shadow:none; } .contact-card .label{ margin-top:8px; font-weight:800; } .contact-card .brand-ico{ width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .contact-card .brand-ico .ico{ width:40px; height:40px; } .contact-card.wa .brand-ico{ background:#25D366; box-shadow:0 12px 26px rgba(37,211,102,.35); } .contact-card.viber .brand-ico{ background:#7360F2; box-shadow:0 12px 26px rgba(115,96,242,.35); } .contact-card.tg .brand-ico{ background:#229ED9; box-shadow:0 12px 26px rgba(34,158,217,.35); } .contact-card.mail .brand-ico{ background:#EF4444; box-shadow:0 12px 26px rgba(239,68,68,.35); } .contact-card:hover .brand-ico{ transform: translateY(-2px); } @media (max-width: 780px){ .contact-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .contact-grid{ display:grid; grid-template-columns: repeat(4, minmax(120px,1fr)); gap:16px; } .contact-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:transparent; border:none; box-shadow:none; } .contact-card .brand-ico{ width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .contact-card .brand-ico .ico{ width:46px; height:46px; } .contact-card .label{ margin-top:8px; font-weight:800; } .contact-card:hover .brand-ico{ transform: translateY(-2px); } @media (max-width: 900px){ .contact-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } header nav .nav-link + .nav-link{ margin-left: 12px; } .contact-grid.round-only{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:8px; } .contact-grid.round-only .contact-btn{ display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; background:transparent !important; border:none !important; box-shadow:none !important; padding:0; outline:none; text-decoration:none; } .brand-ico{ width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: transform .18s ease, box-shadow .18s ease; } .brand-ico .ico{ width:46px; height:46px; } .contact-btn.wa .brand-ico{ background:#25D366; box-shadow:0 10px 22px rgba(37,211,102,.32); } .contact-btn.viber .brand-ico{ background:#7360F2; box-shadow:0 10px 22px rgba(115,96,242,.32); } .contact-btn.tg .brand-ico{ background:#229ED9; box-shadow:0 10px 22px rgba(34,158,217,.32); } .contact-btn.mail .brand-ico{ background:#EF4444; box-shadow:0 10px 22px rgba(239,68,68,.32); } .contact-btn:hover .brand-ico{ transform: translateY(-2px); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (max-width: 560px){ .brand-ico{ width:96px; height:96px; } .brand-ico .ico{ width:50px; height:50px; } } .contact-grid.round-only .brand-ico{ box-shadow: 0 0 0 3px #ffffff, 0 12px 24px rgba(0,0,0,.28); } .contact-grid.round-only .ico path, .contact-grid.round-only .ico polygon, .contact-grid.round-only .ico rect { fill: #fff; } .contact-grid.round-only .contact-btn.wa .brand-ico{ background:#25D366; } .contact-grid.round-only .contact-btn.viber .brand-ico{ background:#7360F2; } .contact-grid.round-only .contact-btn.tg .brand-ico{ background:#229ED9; } .contact-grid.round-only .contact-btn.mail .brand-ico{ background:#EF4444; } .contact-grid.round-only .brand-ico{ width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: none; background: transparent !important; } .contact-grid.round-only .ico{ width:62px; height:62px; display:block; } .contact-grid.round-only .ico .ring{ fill: none; stroke: currentColor; stroke-width: 6; } .contact-grid.round-only .ico .glyph{ fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; } .contact-grid.round-only .contact-btn.wa .ico{ color:#25D366; } .contact-grid.round-only .contact-btn.viber .ico{ color:#7360F2; } .contact-grid.round-only .contact-btn.tg .ico{ color:#229ED9; } .contact-grid.round-only .contact-btn.mail .ico{ color:#EF4444; } .contact-grid.round-only .contact-btn:hover .brand-ico{ transform: translateY(-2px); } .home footer ~ * { display: none !important; } .home footer { padding-bottom: 10px !important; } header .brand{ display:inline-flex; align-items:center; gap:10px; } header .brand .logo-img{ width:88px; height:88px; object-fit:contain; } header .brand span{ font-size:1.75rem; font-weight:900; letter-spacing:.5px; } header .container{ min-height: 96px; padding: 8px 0; } @media (max-width: 640px){ header .brand .logo-img{ width:72px; height:72px; } header .brand span{ font-size:1.35rem; } header .container{ min-height: 80px; } } @media (max-width: 640px){ header .container{ gap: 10px; } header nav{ position: relative; display: flex; align-items: center; gap: 10px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 6px 12px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } header nav::-webkit-scrollbar{ display: none; } header nav .nav-link{ flex: 0 0 auto; scroll-snap-align: start; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); text-decoration: none; } } @media (max-width:860px){ .menu-btn{ display:none !important; } header .container{ height:auto !important; min-height:auto !important; align-items:flex-start; flex-wrap:wrap; gap:10px; } header nav{ display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; overflow:visible !important; white-space:normal !important; padding:6px 0; -webkit-mask-image:none; mask-image:none; } header nav .nav-link{ display:block; text-align:center; font-size:12.5px; padding:7px 6px; border-radius:10px; background: rgba(17,24,39,0.06); border:1px solid rgba(17,24,39,0.12); color:#111827; } } :root{ --brand:#f5a623; --ink:#0f2546; } .btn-primary{ background:linear-gradient(180deg,#f6b53a,#f2a21b); color:#111827; font-weight:900; padding:12px 18px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(0,0,0,.1); text-decoration:none; transition:transform .15s, box-shadow .15s; } .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(245,166,35,.25); } .btn-secondary{ background:#111827; color:#fff; font-weight:800; padding:12px 18px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.1); text-decoration:none; transition:transform .15s, box-shadow .15s; } .btn-secondary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.25); } .trust-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; } .trust-item{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px; color:#fff; } .trust-item strong{ font-weight:900; } .reviews{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); } .review{ background:#0E0F11; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; } .review .who{ display:flex; align-items:center; gap:10px; margin-top:10px; color:#cbd5e1; } .review .who img{ width:34px; height:34px; border-radius:50%; } .howto{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); } .howto .step{ background:#0E0F11; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; color:#cbd5e1; } .howto .step h3{ color:#fff; margin:0 0 6px; } .faq{ border-top:1px solid var(--border); margin-top:20px; } .faq details{ background:#0E0F11; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; margin-top:10px; } .faq summary{ font-weight:800; color:#fff; cursor:pointer; } .faq p{ color:#cbd5e1; margin:8px 0 0; } @media (max-width:768px){ .buy-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:#0b0b0b; border-top:1px solid rgba(255,255,255,.1); padding:10px 12px; display:flex; gap:10px; justify-content:space-between; align-items:center; } .buy-bar .btn-primary{ flex:1; } body.has-buybar{ padding-bottom:78px; } } header .brand .logo-img{ max-height:64px; height:auto; } img[loading="lazy"]{ content-visibility:auto; } @media (max-width:860px){ .trust-bar{ grid-template-columns:1fr 1fr; } .reviews, .howto{ grid-template-columns:1fr; } } header .brand .logo-img { width: 140px !important; height: auto !important; } @media (max-width: 640px){ header .brand .logo-img { width: 120px !important; } } header, header nav{ position: static !important; top: auto !important; } .contact-hero{ padding:48px 16px 16px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06); } .contact-hero h1{ color:#fff; margin:0 0 8px; font-size: clamp(28px, 4vw, 42px); } .contact-hero p{ color:#cbd5e1; margin:0 auto; max-width: 820px; } .contact-wrap{ max-width:1100px; margin:0 auto; padding:22px 16px 60px; } .contact-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } } .contact-card{ background:#0E0F11; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; display:flex; gap:12px; align-items:flex-start; } .contact-card .ic{ font-size:22px; line-height:1; } .contact-card h3{ margin:0 0 4px; color:#fff; font-size:18px; } .contact-card p{ margin:0; color:#cbd5e1; } .contact-card a{ color:#fff; font-weight:800; text-decoration:none; } .contact-card a.btn{ margin-top:8px; display:inline-flex; } .contact-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; } .contact-actions .btn-primary, .contact-actions .btn-secondary{ height:46px; } .contact-faq{ margin-top:26px; } .contact-faq details{ background:#0E0F11; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; margin-top:10px; } .contact-faq summary{ font-weight:800; color:#fff; cursor:pointer; } .contact-faq p{ color:#cbd5e1; margin:8px 0 0; } .map-wrap{ margin-top:20px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); } .map-wrap iframe{ width:100%; height:280px; display:block; filter:grayscale(.1) contrast(1.05); } .contact-card{text-align:center;flex-direction:column;align-items:center;} .contact-card .ic{font-size:26px;margin-bottom:8px;} .btn-wa{ background:#25D366 !important; color:#111827 !important; border-color: rgba(0,0,0,.12) !important; font-weight:900; } .btn-tg{ background:#229ED9 !important; color:#fff !important; border-color: rgba(0,0,0,.12) !important; font-weight:900; } .btn-viber{ background:#7360f2 !important; color:#fff !important; border-color: rgba(0,0,0,.12) !important; font-weight:900; } .btn-mail{ background:#dc2626 !important; color:#fff !important; border-color: rgba(255,255,255,.12) !important; font-weight:900; } .btn-wa:hover, .btn-tg:hover, .btn-viber:hover, .btn-mail:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.25); } .contact-actions a, .contact-card a.btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; height:48px !important; min-width:160px !important; padding:0 18px !important; border-radius:14px !important; font-weight:900 !important; text-decoration:none !important; gap:8px !important; } .contact-actions{ justify-content:center; gap:12px; } a.btn-primary:focus, a.btn-secondary:focus, .btn:focus{ outline:2px solid rgba(245,166,35,.9); outline-offset:2px; } a.btn-primary:active, a.btn-secondary:active{ transform:translateY(0); box-shadow:none; } .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ position:fixed; left:10px; top:10px; width:auto; height:auto; padding:8px 12px; border-radius:10px; background:#111827; color:#fff; z-index:100; } .pricing .price{ position:relative !important; overflow:hidden; color:#fff; background: transparent !important; } .pricing .price .price-bg{ position:absolute; inset:0; z-index:0; background: transparent !important; opacity:.55; } .pricing .price > *:not(.price-bg){ position:relative; z-index:1; } @media (max-width: 860px){ .pricing .grid, .plans, .pricecards{ gap: 16px !important; } } a, button, .btn { min-height: 44px; min-width: 44px; } nav a:focus-visible { outline:2px solid rgba(245,166,35,.9); outline-offset: 2px; border-radius: 10px; } main a:not(.btn):hover { text-decoration: underline; } .pricing .price { position: relative; overflow: hidden; } .pricing .price > * { position: relative; z-index: 1; }