:root{ --bg:#0a0f1a; --bg2:#0e1626; --panel:#111c30; --panel2:#0d1626; --line:#1d2c47; --line2:#27395c; --txt:#e8eef9; --muted:#8aa0c2; --faint:#5f718f; --accent:#087dcc; --accent2:#087dcc; --accentd:#087dcc; --amber:#fbbf24; --red:#fb6f6f; --green:#087dcc; --radius:18px; --shadow:0 20px 50px -25px rgba(0,0,0,.8); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; background: radial-gradient(1100px 600px at 78% -8%, rgba(7,177,255,.10), transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(52,113,211,.12), transparent 55%), var(--bg); color:var(--txt); line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; } a{color:inherit;text-decoration:none} .wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%} main{flex:1 0 auto} .page{padding:36px 0 24px} header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px); background:rgba(10,15,26,.72);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:22px;height:68px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.3px} .brand .dot{width:30px;height:30px;border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:grid;place-items:center;color:#04241c;font-weight:900;box-shadow:0 6px 18px -6px var(--accent)} .brand b{background:linear-gradient(90deg,#fff,#bfe9dc);-webkit-background-clip:text;background-clip:text;color:transparent} .links{display:flex;gap:6px;margin-left:8px} .links a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;transition:.15s} .links a:hover{color:#fff;background:#16223a} .links a.active{color:#fff;background:#16223a} .right{margin-left:auto;display:flex;align-items:center;gap:10px} .support{padding:9px 16px;border:1px solid var(--line2);border-radius:11px;color:#cfe;font-weight:600;font-size:14px} .support:hover{border-color:var(--accent)} .lnk{cursor:pointer;padding:9px 14px;border-radius:11px;font-weight:600;font-size:14px;color:var(--muted)} .lnk:hover{color:#fff;background:#16223a} .btn-sm{cursor:pointer;border:none;font-family:inherit;font-weight:700;border-radius:11px;padding:9px 16px;font-size:14px} .btn-sm.primary{background:linear-gradient(135deg,var(--accent),var(--accentd));color:#042} .btn-sm.ghost{background:#16223a;color:#dbe7fb;border:1px solid var(--line2)} .who{display:flex;align-items:center;gap:9px} .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#042; background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:14px} .who .nm{font-weight:700;font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hero{padding:64px 0 30px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center} .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px; background:rgba(7,177,255,.10);border:1px solid rgba(7,177,255,.30);color:#24cfff;font-size:13px;font-weight:700} .hero h1{font-size:clamp(34px,5vw,54px);line-height:1.05;margin:18px 0 14px;font-weight:850;letter-spacing:-1px} .hero h1 span{background:linear-gradient(100deg,var(--accent),#5bd0ff);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{color:var(--muted);font-size:17px;max-width:520px} .hero .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .btn{cursor:pointer;border:none;font-weight:700;border-radius:12px;padding:13px 22px;font-size:15px;transition:.15s;font-family:inherit;display:inline-block} .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accentd));color:#042;box-shadow:0 12px 30px -12px var(--accent)} .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)} .btn-ghost{background:#16223a;color:#dbe7fb;border:1px solid var(--line2)} .btn-ghost:hover{border-color:var(--accent)} .orb{position:relative;height:300px;display:grid;place-items:center} .orb .ring{position:absolute;border:1px solid var(--line2);border-radius:50%;opacity:.6} .orb .r1{width:300px;height:300px}.orb .r2{width:210px;height:210px}.orb .r3{width:130px;height:130px} .orb .core{width:120px;height:120px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#24cfff,var(--accentd)); box-shadow:0 0 70px 6px rgba(7,177,255,.45);display:grid;place-items:center;font-weight:800;color:#042b22;animation:float 5s ease-in-out infinite} @keyframes float{50%{transform:translateY(-12px)}} .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:10px 0 30px} .cat-tile{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line); border-radius:var(--radius);padding:26px;transition:.18s;display:block} .cat-tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)} .cat-tile .ico{font-size:30px} .cat-tile h3{margin:12px 0 4px;font-size:19px} .cat-tile p{margin:0;color:var(--muted);font-size:13.5px} .cat-tile .cnt{margin-top:12px;font-size:12px;font-weight:700;color:var(--accent)} .sec-head{margin-bottom:26px} .sec-head h2{font-size:30px;font-weight:820;margin:0 0 6px} .sec-head h2 span{color:var(--accent)} .sec-head p{color:var(--muted);margin:0} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px} .card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line); border-radius:var(--radius);padding:22px;position:relative;transition:.18s;overflow:hidden} .card:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow)} .card .op{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase} .card h3{margin:6px 0 4px;font-size:18px;font-weight:750} .tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} .tag{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:8px;background:#16223a;color:#aecbe6;border:1px solid var(--line)} .tag.ddd{color:#ffe2a6;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.25)} .price{font-size:26px;font-weight:850;color:#fff;margin-top:8px} .stock{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin:10px 0 14px} .stock .ico{width:8px;height:8px;border-radius:50%} .ok .ico{background:var(--green);box-shadow:0 0 8px var(--green)}.ok{color:#9fe8cf} .no .ico{background:var(--red)}.no{color:#f0a3a3} .buyrow{display:flex;align-items:center;gap:10px} .stepper{display:flex;align-items:center;border:1px solid var(--line2);border-radius:10px;overflow:hidden} .stepper button{width:34px;height:38px;background:#16223a;border:none;color:#cfe;font-size:18px;cursor:pointer} .stepper button:hover{background:#1d2c47} .stepper input{width:40px;height:38px;text-align:center;background:transparent;border:none;color:#fff;font-weight:700;font-size:15px;-moz-appearance:textfield} .stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none} .buyrow .btn{flex:1;padding:11px} .btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.5)} .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:48px;border:1px dashed var(--line2);border-radius:var(--radius)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px} .step{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center} .step .n{font-size:12px;color:var(--accent);font-weight:800} .step .e{font-size:28px;margin:8px 0} .step h4{margin:6px 0;font-size:15px} .step p{margin:0;color:var(--muted);font-size:13px} footer{border-top:1px solid var(--line);margin-top:auto;padding:28px 0;text-align:center;color:var(--muted);flex:none} footer .brand{justify-content:center;margin-bottom:10px} .mask{position:fixed;inset:0;background:rgba(4,8,16,.72);backdrop-filter:blur(4px);z-index:90;display:none;align-items:center;justify-content:center;padding:20px} .mask.show{display:flex} .modal{width:100%;max-width:440px;background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line2);border-radius:22px;box-shadow:var(--shadow);padding:26px;max-height:92vh;overflow:auto} .modal h3{margin:0 0 4px;font-size:20px} .modal .sub{color:var(--muted);font-size:14px;margin-bottom:18px} .close{float:right;cursor:pointer;color:var(--muted);font-size:22px;line-height:1} .qrbox{background:#fff;border-radius:16px;padding:14px;width:230px;margin:0 auto;display:grid;place-items:center} .qrbox img{width:100%;display:block} .copy{display:flex;gap:8px;margin-top:16px} .copy input{flex:1;background:#0a1322;border:1px solid var(--line2);border-radius:10px;color:#bcd;padding:11px;font-size:12px;font-family:monospace} .copy button{white-space:nowrap} .status{margin-top:16px;text-align:center;font-weight:600;font-size:14px;color:var(--amber)} .status.paid{color:var(--green)} .spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--amber);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:7px} @keyframes sp{to{transform:rotate(360deg)}} .deliv{margin-top:8px} .deliv .item{border:1px solid var(--line2);border-radius:14px;padding:16px;margin-bottom:12px;text-align:center} .deliv .item img{width:200px;max-width:100%;background:#fff;border-radius:12px;padding:10px;margin:8px auto} .deliv .cap{font-size:13px;color:#cfe;white-space:pre-line;text-align:left} .alert{background:rgba(251,111,111,.08);border:1px solid rgba(251,111,111,.3);color:#f3b6b6;padding:11px 14px;border-radius:10px;font-size:13.5px;margin-top:10px} .tabs{display:flex;gap:6px;background:#0c1422;border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:18px} .tabs button{flex:1;border:none;background:transparent;color:var(--muted);font-weight:700;font-family:inherit;padding:9px;border-radius:9px;cursor:pointer;font-size:14px} .tabs button.on{background:#17243d;color:#fff} .field{margin-bottom:13px} .field label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:6px} .field input,.field select{width:100%;background:#0a1322;border:1px solid var(--line2);border-radius:10px;color:#fff;padding:12px;font-size:14px;font-family:inherit} .field input:focus,.field select:focus{outline:none;border-color:var(--accent)} .full{width:100%;justify-content:center;margin-top:6px;text-align:center} .chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px} .chips button{flex:1;min-width:64px;background:#16223a;border:1px solid var(--line2);color:#dbe7fb;border-radius:10px;padding:10px;font-weight:700;cursor:pointer;font-family:inherit} .chips button:hover{border-color:var(--accent)} .ohist{display:flex;flex-direction:column;gap:12px} .ord{border:1px solid var(--line2);border-radius:14px;padding:15px;background:var(--panel2)} .ord .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .ord .ot{font-weight:700;font-size:14.5px} .ord .od{color:var(--muted);font-size:12px;margin-top:2px} .st{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap} .st.delivered{color:#9fe8cf;background:rgba(23,173,255,.12)} .st.pending{color:#ffe2a6;background:rgba(251,191,36,.12)} .st.other{color:#aecbe6;background:#16223a} .ord .acts{margin-top:11px;display:flex;flex-wrap:wrap;gap:8px} .ord .acts a,.ord .acts button{font-size:13px;padding:8px 13px;border-radius:9px;cursor:pointer;border:1px solid var(--line2);background:#16223a;color:#dbe7fb;font-weight:600;font-family:inherit} .ord img.qr{width:150px;background:#fff;border-radius:10px;padding:8px;margin-top:10px} .acct-grid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start} .profile .nm2{font-size:18px;font-weight:800} .profile .em{color:var(--muted);font-size:13px;margin-top:2px} .balrow{display:flex;align-items:center;justify-content:space-between;margin:16px 0 12px} .balrow .v{font-size:26px;font-weight:850;color:var(--accent)} .smsbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel2); border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:16px;font-size:15px} .smsbar b{color:var(--accent)} .smsgrid{display:grid;grid-template-columns:1.4fr 1.4fr .8fr auto;gap:14px;align-items:end} .smsgrid .field{margin-bottom:0} .smsprice{font-size:22px;font-weight:850;color:#fff;padding:8px 0} .smsgrid .btn{padding:13px 20px;white-space:nowrap} .sms-card .phone{font-size:20px;font-weight:800;color:#fff;font-family:monospace;letter-spacing:.5px} .sms-card .code{font-size:22px;font-weight:850;color:var(--accent);font-family:monospace;letter-spacing:2px} .sms-card .meta{color:var(--muted);font-size:12.5px;margin-top:3px} .copybtn{cursor:pointer;border:1px solid var(--line2);background:#16223a;color:#cfe;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;margin-left:8px;font-family:inherit} @media(max-width:880px){.hero{grid-template-columns:1fr}.orb{display:none}.steps{grid-template-columns:repeat(2,1fr)} .links{display:none}.acct-grid{grid-template-columns:1fr}} @media(max-width:760px){.smsgrid{grid-template-columns:1fr 1fr}.smsgrid .btn{grid-column:1/-1}} .balchip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; cursor:pointer; background:linear-gradient(135deg,rgba(7,151,255,.16),rgba(7,151,255,.06)); border:1px solid rgba(7,151,255,.45); box-shadow:0 0 0 rgba(7,151,255,0); transition:.18s ease; font-family:inherit; line-height:1; } .balchip:hover{ border-color:rgba(7,151,255,.8); box-shadow:0 0 14px rgba(7,151,255,.28); transform:translateY(-1px); } .balchip:active{ transform:translateY(0); } .balchip-lb{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); } .balchip-v{ font-size:14px; font-weight:700; color:#087dcc; } .balchip-p{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(7,151,255,.22); color:#087dcc; font-size:13px; font-weight:700; } @media(max-width:520px){ .balchip{ padding:6px 10px; gap:6px; } .balchip-lb{ display:none; } } html { background:#02050b; } body { position:relative; isolation:isolate; overflow-x:hidden; min-height:100vh; background: radial-gradient(circle at 12% 8%, rgba(0,209,255,.17), transparent 30%), radial-gradient(circle at 90% 22%, rgba(0,140,255,.14), transparent 32%), radial-gradient(circle at 50% 90%, rgba(0,209,255,.08), transparent 38%), linear-gradient(155deg,#02050b 0%,#071221 45%,#030813 72%,#01040a 100%) !important; } body::before { content:""; position:fixed; z-index:-2; pointer-events:none; width:150vw; height:120vh; left:-25vw; bottom:-60vh; opacity:.23; background-image: linear-gradient(rgba(0,209,255,.20) 1px, transparent 1px), linear-gradient(90deg, rgba(0,209,255,.18) 1px, transparent 1px); background-size:52px 52px; transform:perspective(650px) rotateX(63deg); transform-origin:center top; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 75%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 75%,transparent 100%); } body::after { content:""; position:fixed; z-index:-1; pointer-events:none; inset:-20%; background: radial-gradient(circle at 18% 26%,rgba(0,209,255,.15),transparent 10%), radial-gradient(circle at 82% 18%,rgba(0,150,255,.13),transparent 12%), radial-gradient(circle at 70% 78%,rgba(0,209,255,.10),transparent 12%); filter:blur(34px); animation:teknosGlow 12s ease-in-out infinite alternate; } @keyframes teknosGlow { 0% {transform:translate3d(-2%,0,0) scale(1);} 100% {transform:translate3d(2%,-2%,0) scale(1.08);} } header, .topbar, .navbar, nav { background:rgba(3,12,23,.76); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } header { border-bottom:1px solid rgba(0,209,255,.15); box-shadow:0 10px 40px rgba(0,0,0,.35); } .hero { position:relative; overflow:hidden; border:1px solid rgba(0,209,255,.16); border-radius:28px; padding:34px; background: linear-gradient(135deg,rgba(10,28,45,.78),rgba(3,10,20,.72)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05), 0 0 55px rgba(0,209,255,.05); } .hero::before { content:""; position:absolute; width:300px; height:300px; right:-100px; top:-150px; border-radius:50%; background:radial-gradient(circle,rgba(0,209,255,.22),transparent 68%); filter:blur(10px); pointer-events:none; } .hero h1 { text-shadow:0 8px 25px rgba(0,0,0,.55); } .hero h1 span, .sec-head h2 span { background:linear-gradient(90deg,#24cfff,#00cfff); -webkit-background-clip:text; background-clip:text; color:transparent !important; } .page { position:relative; } .sec-head h2 { letter-spacing:-.03em; } #home-cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card, .account-card { position:relative; overflow:hidden; border:1px solid rgba(90,180,255,.18) !important; background: linear-gradient(145deg, rgba(16,34,56,.82), rgba(5,13,27,.88) ) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow: 0 20px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } #home-cats > *::before, .steps > *::before, .card::before, .plan-card::before, .product-card::before, .esim-card::before, .sms-card::before { content:""; position:absolute; pointer-events:none; inset:0; background: linear-gradient( 120deg, transparent 15%, rgba(255,255,255,.035) 42%, transparent 66% ); } #home-cats > *:hover, .steps > *:hover, .card:hover, .plan-card:hover, .product-card:hover, .esim-card:hover { transform:translateY(-4px); border-color:rgba(0,209,255,.45) !important; box-shadow: 0 26px 60px rgba(0,0,0,.42), 0 0 28px rgba(0,209,255,.09); } .btn-primary, button.btn-primary, a.btn-primary { border:1px solid rgba(40,209,255,.55) !important; background: linear-gradient(135deg,#087dcc 0%,#087dcc 55%,#009b83 100%) !important; box-shadow: 0 12px 28px rgba(0,172,255,.25), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow: 0 17px 36px rgba(0,188,255,.36), 0 0 28px rgba(0,209,255,.16); } .btn-ghost { background:rgba(14,31,53,.66) !important; backdrop-filter:blur(10px); border-color:rgba(100,160,255,.22) !important; } .pill, .balchip { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow: 0 8px 25px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.04); } .stock, .available, .availability { text-shadow:0 0 14px rgba(0,209,255,.30); } @media (max-width:880px) { body::before { opacity:.16; background-size:38px 38px; bottom:-66vh; } body::after { filter:blur(45px); opacity:.9; } .hero { padding:24px 20px !important; border-radius:22px; margin-top:12px; } #home-cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card { border-radius:20px; box-shadow: 0 15px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035); } .btn { min-height:50px; border-radius:14px; } } @media (max-width:520px) { .hero { padding:22px 18px !important; } .hero h1 { line-height:1.05; } body::before { opacity:.12; } } body{ background: radial-gradient(circle at 85% 8%, rgba(0,209,255,.20), transparent 28%), radial-gradient(circle at 5% 42%, rgba(0,130,255,.16), transparent 32%), radial-gradient(circle at 80% 78%, rgba(150,0,255,.10), transparent 30%), linear-gradient(145deg,#020611 0%,#061426 45%,#020711 100%) !important; background-attachment:fixed !important; } body::before{ content:"" !important; display:block !important; position:fixed !important; left:-35% !important; bottom:-46% !important; width:170% !important; height:95% !important; z-index:-1 !important; opacity:.42 !important; pointer-events:none !important; background-image: linear-gradient(rgba(0,209,255,.32) 1px,transparent 1px), linear-gradient(90deg,rgba(0,209,255,.32) 1px,transparent 1px) !important; background-size:36px 36px !important; transform:perspective(500px) rotateX(62deg) !important; filter: drop-shadow(0 0 6px rgba(0,209,255,.20)) drop-shadow(0 0 18px rgba(0,209,255,.12)) !important; } .hero{ position:relative !important; isolation:isolate !important; overflow:hidden !important; margin-top:18px !important; padding:28px 22px !important; background: linear-gradient(135deg,rgba(11,31,52,.87),rgba(3,10,22,.76)) !important; border:1px solid rgba(0,209,255,.28) !important; border-radius:26px !important; box-shadow: 0 30px 70px rgba(0,0,0,.48), 0 0 35px rgba(0,209,255,.09), inset 0 1px 0 rgba(255,255,255,.08) !important; } .orb{ display:block !important; position:absolute !important; width:210px !important; height:210px !important; right:-82px !important; top:72px !important; opacity:.58 !important; z-index:-1 !important; transform:scale(.9) rotate(-10deg) !important; filter: drop-shadow(0 0 18px rgba(0,209,255,.45)) drop-shadow(0 0 40px rgba(0,180,255,.25)) !important; } .orb .core{ box-shadow: 0 0 25px rgba(0,209,255,.65), 0 0 65px rgba(0,209,255,.28) !important; } .orb .ring{ box-shadow: 0 0 16px rgba(0,209,255,.35), inset 0 0 15px rgba(0,209,255,.20) !important; } .cats > *, #home-cats > *, .plan-card, .product-card, .sms-card, .card{ border:1px solid rgba(0,209,255,.23) !important; background: linear-gradient(145deg, rgba(15,36,59,.91), rgba(4,13,27,.94)) !important; box-shadow: 0 24px 50px rgba(0,0,0,.40), 0 0 28px rgba(0,209,255,.055), inset 0 1px 0 rgba(255,255,255,.07) !important; } .cats > *::after, #home-cats > *::after{ content:""; position:absolute; left:8%; top:0; width:84%; height:1px; background:linear-gradient( 90deg, transparent, rgba(0,209,255,.75), transparent ); } .hero h1{ text-shadow: 0 5px 18px rgba(0,0,0,.70), 0 0 25px rgba(0,209,255,.08) !important; } .btn-primary{ background: linear-gradient(135deg,#24cfff,#087dcc,#009f8c) !important; box-shadow: 0 12px 30px rgba(0,188,255,.32), 0 0 22px rgba(0,209,255,.14), inset 0 1px rgba(255,255,255,.25) !important; } @media(max-width:520px){ .hero{ min-height:420px !important; } .orb{ display:block !important; width:190px !important; height:190px !important; right:-80px !important; top:78px !important; opacity:.48 !important; } body::before{ opacity:.34 !important; } } :root{ --accent:#19d9ff; --blue:#1677ff; --blue2:#294cff; --navy:#020817; } body{ background: radial-gradient(circle at 85% 8%,rgba(0,179,255,.25),transparent 27%), radial-gradient(circle at 12% 38%,rgba(37,73,255,.22),transparent 30%), radial-gradient(circle at 78% 72%,rgba(101,49,255,.14),transparent 26%), linear-gradient(145deg,#01040d 0%,#031226 36%,#061633 58%,#010713 100%) !important; background-attachment:fixed !important; } body::before{ background-image: linear-gradient(rgba(29,145,255,.34) 1px,transparent 1px), linear-gradient(90deg,rgba(15,202,255,.28) 1px,transparent 1px) !important; filter: drop-shadow(0 0 5px rgba(0,174,255,.35)) drop-shadow(0 0 16px rgba(39,79,255,.20)) !important; opacity:.37 !important; } body::after{ content:"" !important; display:block !important; position:fixed !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='420' viewBox='0 0 240 420'%3E%3Cpath d='M180 0 L112 137 L157 124 L74 264 L116 242 L48 420 L191 205 L145 220 L220 83 L172 99 Z' fill='none' stroke='%2319d9ff' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M180 0 L112 137 L157 124 L74 264' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='340' viewBox='0 0 180 340'%3E%3Cpath d='M40 0 L91 104 L60 96 L127 200 L95 184 L150 340 L41 163 L76 177 L18 65 L54 78 Z' fill='none' stroke='%234c69ff' stroke-width='4'/%3E%3Cpath d='M40 0 L91 104 L60 96 L127 200' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E"), radial-gradient(circle at 85% 18%,rgba(0,204,255,.18),transparent 20%), radial-gradient(circle at 8% 62%,rgba(71,61,255,.18),transparent 22%) !important; background-repeat:no-repeat !important; background-position: 105% 8%, -5% 58%, center, center !important; background-size: 210px 370px, 170px 320px, auto, auto !important; opacity:.52 !important; filter: drop-shadow(0 0 8px rgba(32,205,255,.85)) drop-shadow(0 0 26px rgba(32,102,255,.55)) !important; animation:teknosLightning 6s infinite; } @keyframes teknosLightning{ 0%,7%,11%,52%,56%,100%{opacity:.28} 8%,10%,53%,55%{opacity:.72} } header{ background: linear-gradient(90deg, rgba(1,8,24,.95), rgba(3,23,52,.94), rgba(1,8,24,.96)) !important; border-bottom:1px solid rgba(22,146,255,.35) !important; box-shadow: 0 8px 35px rgba(0,0,0,.55), 0 0 26px rgba(0,116,255,.10) !important; } .hero{ background: linear-gradient(135deg, rgba(4,25,56,.93), rgba(3,12,31,.90), rgba(7,29,63,.88)) !important; border:1px solid rgba(28,170,255,.48) !important; box-shadow: 0 30px 80px rgba(0,0,0,.52), 0 0 40px rgba(0,153,255,.15), inset 0 1px 0 rgba(100,220,255,.18) !important; } .hero::before{ background: radial-gradient(circle, rgba(0,199,255,.35), rgba(37,83,255,.12) 45%, transparent 70%) !important; } .orb{ filter: hue-rotate(65deg) drop-shadow(0 0 22px rgba(0,193,255,.65)) drop-shadow(0 0 55px rgba(30,85,255,.40)) !important; } .hero h1 span, .sec-head h2 span{ background: linear-gradient(90deg,#25e7ff,#20a7ff,#6470ff) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } .cats > *, #home-cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card{ background: linear-gradient(145deg, rgba(8,31,66,.94), rgba(3,14,34,.96)) !important; border:1px solid rgba(38,136,255,.34) !important; box-shadow: 0 22px 55px rgba(0,0,0,.44), 0 0 25px rgba(0,111,255,.08), inset 0 1px 0 rgba(120,205,255,.10) !important; } #home-cats > :nth-child(1){ border-color:rgba(0,209,255,.55) !important; box-shadow:0 22px 55px rgba(0,0,0,.42), 0 0 25px rgba(0,205,255,.12) !important; } #home-cats > :nth-child(2){ border-color:rgba(91,85,255,.55) !important; box-shadow:0 22px 55px rgba(0,0,0,.42), 0 0 25px rgba(90,72,255,.13) !important; } #home-cats > :nth-child(3){ border-color:rgba(255,169,44,.48) !important; box-shadow:0 22px 55px rgba(0,0,0,.42), 0 0 24px rgba(255,156,30,.10) !important; } .cta .btn-primary, .btn-primary{ background: linear-gradient(135deg,#12dfff,#078cff,#294cff) !important; border:1px solid rgba(99,222,255,.75) !important; box-shadow: 0 12px 32px rgba(0,128,255,.42), 0 0 24px rgba(0,208,255,.25), inset 0 1px 0 rgba(255,255,255,.38) !important; color:white !important; } .cta .btn-ghost, .btn-ghost{ background: linear-gradient(135deg, rgba(71,55,200,.82), rgba(23,47,108,.94)) !important; border:1px solid rgba(121,113,255,.55) !important; box-shadow: 0 12px 30px rgba(39,34,160,.28), 0 0 20px rgba(94,72,255,.16) !important; color:#fff !important; } .pill{ color:#aeefff !important; border-color:rgba(0,201,255,.55) !important; background: linear-gradient(135deg, rgba(0,157,255,.18), rgba(24,69,160,.18)) !important; box-shadow:0 0 22px rgba(0,190,255,.13) !important; } .balchip{ background: linear-gradient(135deg, rgba(18,114,255,.25), rgba(73,62,255,.16)) !important; border-color:rgba(44,156,255,.55) !important; } .balchip-v, .balchip-p{ color:#42dfff !important; } .btn:hover, #home-cats > *:hover, .card:hover, .plan-card:hover{ transform:translateY(-3px) !important; filter:brightness(1.10); } @media(max-width:520px){ body::after{ background-position: 115% 7%, -22% 68%, center, center !important; background-size: 180px 330px, 145px 280px, auto, auto !important; opacity:.48 !important; } .hero{ border-color:rgba(25,184,255,.52) !important; } } body{ background-attachment:scroll !important; } body::before{ filter:none !important; animation:none !important; opacity:.22 !important; } body::after{ animation:none !important; filter:none !important; opacity:.22 !important; } header, .topbar, .navbar, nav, .hero, .card, .plan-card, .product-card, .esim-card, .sms-card, .account-card, #home-cats > *, .steps > *, .pill, .balchip{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .hero{ box-shadow: 0 18px 38px rgba(0,0,0,.36), 0 0 18px rgba(0,140,255,.08) !important; } .cats > *, #home-cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card{ box-shadow: 0 12px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(80,180,255,.07) !important; transition:none !important; } .btn-primary{ box-shadow: 0 8px 18px rgba(0,120,255,.28) !important; } .btn-ghost{ box-shadow: 0 8px 18px rgba(41,53,160,.20) !important; } .btn:hover, #home-cats > *:hover, .card:hover, .plan-card:hover{ transform:none !important; filter:none !important; } @media(max-width:880px){ .orb{ display:none !important; } body::after{ opacity:.18 !important; background-size: 135px 250px, 115px 215px, auto, auto !important; } body::before{ opacity:.16 !important; } } .brand-logo{ display:block; height:60px; width:auto; max-width:220px; object-fit:contain; } @media (max-width: 760px){ .brand-logo{ height:54px; max-width:180px; } } @media (max-width: 520px){ .brand-logo{ height:48px; max-width:160px; } } html, body{ background:#000 !important; } body::before{ opacity:.05 !important; filter:none !important; animation:none !important; } body::after{ display:none !important; } header, .topbar, .navbar, nav{ background:#000 !important; border-bottom:1px solid rgba(0,209,255,.28) !important; box-shadow:0 4px 18px rgba(0,209,255,.06) !important; } .hero{ background: linear-gradient(145deg,#030303,#080808,#020202) !important; border:1px solid rgba(0,209,255,.30) !important; box-shadow: 0 16px 35px rgba(0,0,0,.65), inset 0 1px 0 rgba(0,209,255,.05) !important; } #home-cats > *, .cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card{ background: linear-gradient(145deg,#080808,#020202) !important; border:1px solid rgba(0,209,255,.22) !important; box-shadow: 0 10px 25px rgba(0,0,0,.55), inset 0 1px 0 rgba(0,209,255,.04) !important; } header a:not(.brand), header button, header .balchip{ position:relative; overflow:hidden; color:#24cfff !important; background: linear-gradient( 110deg, rgba(0,209,255,.05), rgba(0,209,255,.18), rgba(0,209,255,.05) ) !important; background-size:220% 100% !important; border:1px solid rgba(0,209,255,.55) !important; box-shadow: 0 0 7px rgba(0,209,255,.18), inset 0 0 8px rgba(0,209,255,.05) !important; animation:teknosNeonMove 3.2s linear infinite !important; } @keyframes teknosNeonMove{ 0%{ background-position:200% center; } 100%{ background-position:-200% center; } } header a:not(.brand):hover, header button:hover, header .balchip:hover{ color:#24cfff !important; border-color:#24cfff !important; box-shadow: 0 0 10px rgba(0,209,255,.45), 0 0 22px rgba(0,209,255,.18) !important; } .btn-primary{ color:#001b09 !important; background: linear-gradient( 110deg, #087dcc, #24cfff, #087dcc ) !important; background-size:220% 100% !important; border:1px solid #24cfff !important; box-shadow: 0 7px 18px rgba(0,209,255,.25) !important; animation:teknosNeonMove 3.5s linear infinite !important; } .btn-ghost{ color:#24cfff !important; background: linear-gradient( 110deg, #050505, rgba(0,209,255,.12), #050505 ) !important; background-size:220% 100% !important; border:1px solid rgba(0,209,255,.45) !important; box-shadow:none !important; animation:teknosNeonMove 4s linear infinite !important; } .hero h1 span, .sec-head h2 span{ background: linear-gradient(90deg,#ffffff,#24cfff,#24cfff) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } .pill{ background:#030b06 !important; color:#24cfff !important; border-color:rgba(0,209,255,.48) !important; box-shadow:none !important; } .balchip-v, .balchip-p{ color:#24cfff !important; } @media(max-width:760px){ header a:not(.brand), header button, header .balchip{ animation-duration:4.5s !important; } .btn-primary, .btn-ghost{ animation-duration:4.5s !important; } } body::after{ content:"" !important; display:block !important; position:fixed !important; inset:0 !important; pointer-events:none !important; z-index:999 !important; background-image: linear-gradient( to bottom, rgba(25,209,255,0) 0%, rgba(35,185,255,.10) 14%, rgba(25,209,255,.95) 42%, rgba(90,209,255,1) 50%, rgba(25,209,255,.95) 58%, rgba(35,185,255,.10) 86%, rgba(25,209,255,0) 100% ), linear-gradient( to bottom, rgba(25,209,255,0) 0%, rgba(35,185,255,.10) 14%, rgba(25,209,255,.95) 42%, rgba(90,209,255,1) 50%, rgba(25,209,255,.95) 58%, rgba(35,185,255,.10) 86%, rgba(25,209,255,0) 100% ) !important; background-size: 3px 220px, 3px 220px !important; background-repeat: repeat-y, repeat-y !important; background-position: left top -220px, right bottom -220px !important; animation:edgeFlowNeon 6s linear infinite !important; } @keyframes edgeFlowNeon{ 0%{ background-position: left top -220px, right bottom -220px; } 100%{ background-position: left top 100vh, right bottom 100vh; } } html{ box-shadow: inset 2px 0 10px rgba(35,185,255,.10), inset -2px 0 10px rgba(35,185,255,.10) !important; } .hero, .cats > *, #home-cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card, .account-card{ border-color:rgba(25,209,255,.24) !important; box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 10px rgba(25,209,255,.07) !important; } a{ color:#24cfff !important; } @media (max-width: 880px){ body::after{ background-size: 2px 180px, 2px 180px !important; opacity:.88 !important; } .btn::after, .btn-primary::after, .btn-ghost::after, .pill::after, .balchip::after, header a:not(.brand)::after{ animation-duration:3.6s !important; } } .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand){ position:relative !important; overflow:hidden !important; border:1px solid rgba(33,209,255,.65) !important; background: linear-gradient( 110deg, #031008 0%, #061b35 25%, #087dcc 45%, #24cfff 52%, #087dcc 60%, #031008 100% ) !important; background-size:260% 100% !important; animation: teknosCommandFlow 4s linear infinite, teknosCommandPulse 2.2s ease-in-out infinite !important; color:#ffffff !important; box-shadow: 0 0 8px rgba(25,209,255,.20), 0 0 18px rgba(25,209,255,.10), inset 0 0 10px rgba(20,100,255,.10) !important; } @keyframes teknosCommandFlow{ 0%{ background-position:200% center; } 100%{ background-position:-60% center; } } @keyframes teknosCommandPulse{ 0%,100%{ box-shadow: 0 0 7px rgba(35,180,255,.22), 0 0 14px rgba(35,185,255,.10), inset 0 0 8px rgba(25,209,255,.05); } 50%{ box-shadow: 0 0 12px rgba(25,209,255,.38), 0 0 24px rgba(25,209,255,.20), inset 0 0 14px rgba(25,209,255,.10); } } .btn::after, .btn-primary::after, .btn-ghost::after, .pill::after, .balchip::after, header a:not(.brand)::after{ content:"" !important; position:absolute !important; top:-40% !important; left:-35% !important; width:28% !important; height:180% !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.04), rgba(85,209,255,.45), rgba(255,255,255,.08), transparent ) !important; transform:skewX(-20deg) !important; animation:teknosCommandSweep 3.4s linear infinite !important; pointer-events:none !important; } @keyframes teknosCommandSweep{ 0%{ left:-40%; opacity:0; } 15%{ opacity:.9; } 70%{ opacity:.7; } 100%{ left:120%; opacity:0; } } .btn::before, .btn-primary::before, .btn-ghost::before, .pill::before, .balchip::before, header a:not(.brand)::before{ content:"" !important; position:absolute !important; left:-40% !important; bottom:0 !important; width:38% !important; height:2px !important; background: linear-gradient( 90deg, transparent, #24cfff, #24cfff, transparent ) !important; box-shadow: 0 0 8px rgba(25,209,255,.8) !important; animation:teknosBottomRunner 2.8s linear infinite !important; pointer-events:none !important; } @keyframes teknosBottomRunner{ 0%{ left:-40%; } 100%{ left:110%; } } .btn:hover, .btn-primary:hover, .btn-ghost:hover, .pill:hover, .balchip:hover, header a:not(.brand):hover{ border-color:#24cfff !important; box-shadow: 0 0 15px rgba(25,209,255,.48), 0 0 30px rgba(25,209,255,.22) !important; } @media(max-width:880px){ .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand){ animation-duration: 4.5s, 2.8s !important; } .btn::after, .btn-primary::after, .btn-ghost::after, .pill::after, .balchip::after, header a:not(.brand)::after{ animation-duration:4s !important; } } .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand){ position:relative !important; overflow:hidden !important; color:#fff !important; border:1px solid rgba(31,209,255,.75) !important; background: linear-gradient( 115deg, #020703 0%, #052312 15%, #087dcc 28%, #24cfff 39%, #24cfff 48%, #087dcc 60%, #03150b 75%, #020703 100% ) !important; background-size:350% 350% !important; animation: teknosLiquidMove 4s linear infinite, teknosNeonBreath 2.3s ease-in-out infinite !important; box-shadow: 0 0 7px rgba(25,209,255,.30), 0 0 16px rgba(35,180,255,.18), inset 0 0 12px rgba(0,209,255,.10) !important; } @keyframes teknosLiquidMove{ 0%{ background-position:0% 50%; } 25%{ background-position:50% 0%; } 50%{ background-position:100% 50%; } 75%{ background-position:50% 100%; } 100%{ background-position:0% 50%; } } @keyframes teknosNeonBreath{ 0%,100%{ border-color:rgba(25,209,255,.42); box-shadow: 0 0 6px rgba(25,209,255,.18), 0 0 12px rgba(35,185,255,.10), inset 0 0 8px rgba(20,100,255,.10); } 50%{ border-color:rgba(65,209,255,.95); box-shadow: 0 0 12px rgba(25,209,255,.50), 0 0 26px rgba(25,209,255,.22), inset 0 0 16px rgba(0,209,255,.13); } } .btn::after, .btn-primary::after, .btn-ghost::after, .pill::after, .balchip::after, header a:not(.brand)::after{ content:"" !important; position:absolute !important; width:130% !important; height:220% !important; top:-60% !important; left:-120% !important; background: radial-gradient( ellipse at center, rgba(90,209,255,.36) 0%, rgba(29,209,255,.20) 24%, rgba(0,192,255,.08) 44%, transparent 68% ) !important; transform:rotate(18deg) !important; animation:teknosEnergyWave 3.6s ease-in-out infinite !important; pointer-events:none !important; } @keyframes teknosEnergyWave{ 0%{ left:-130%; opacity:.15; } 35%{ opacity:.65; } 70%{ opacity:.42; } 100%{ left:105%; opacity:.05; } } .btn::before, .btn-primary::before, .btn-ghost::before, .pill::before, .balchip::before, header a:not(.brand)::before{ content:"" !important; position:absolute !important; bottom:0 !important; left:-45% !important; width:45% !important; height:2px !important; background: linear-gradient( 90deg, transparent, #24cfff, #e4ffed, #24cfff, transparent ) !important; box-shadow: 0 0 6px #24cfff, 0 0 12px rgba(25,209,255,.65) !important; animation:teknosBorderRunner 2.6s linear infinite !important; pointer-events:none !important; } @keyframes teknosBorderRunner{ from{ left:-45%; } to{ left:110%; } } .btn-primary{ background: linear-gradient( 120deg, #021108, #087dcc, #24cfff, #087dcc, #087dcc, #021108 ) !important; background-size:320% 320% !important; } @media(max-width:880px){ .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand){ animation: teknosLiquidMove 4.8s linear infinite, teknosNeonBreath 2.8s ease-in-out infinite !important; } } .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand), header button{ position:relative !important; overflow:hidden !important; isolation:isolate !important; background: linear-gradient(135deg,#020804,#062313,#061b35,#031108) !important; border:1px solid rgba(24,209,255,.75) !important; box-shadow: 0 0 8px rgba(18,209,255,.35), 0 0 18px rgba(18,209,255,.13), inset 0 0 10px rgba(18,209,255,.08) !important; animation:commandGlow 1.8s ease-in-out infinite alternate !important; } .btn::before, .btn-primary::before, .btn-ghost::before, .pill::before, .balchip::before, header a:not(.brand)::before, header button::before{ content:"" !important; position:absolute !important; z-index:0 !important; top:-40% !important; left:0 !important; width:48% !important; height:180% !important; background: linear-gradient( 90deg, transparent 0%, rgba(0,209,255,.05) 18%, rgba(13,209,255,.50) 42%, rgba(220,255,230,.85) 50%, rgba(13,209,255,.50) 58%, rgba(0,209,255,.05) 82%, transparent 100% ) !important; transform: translate3d(-180%,0,0) skewX(-22deg) !important; animation: commandBeamMove 2.1s linear infinite !important; pointer-events:none !important; } .btn::after, .btn-primary::after, .btn-ghost::after, .pill::after, .balchip::after, header a:not(.brand)::after, header button::after{ content:"" !important; position:absolute !important; bottom:0 !important; left:0 !important; width:32% !important; height:3px !important; border-radius:999px !important; background: linear-gradient( 90deg, transparent, #24cfff, #eaffef, #24cfff, transparent ) !important; box-shadow: 0 0 6px #24cfff, 0 0 14px rgba(14,209,255,.9) !important; transform:translate3d(-150%,0,0) !important; animation: commandBorderMove 1.55s linear infinite !important; pointer-events:none !important; } @keyframes commandBeamMove{ 0%{ transform: translate3d(-180%,0,0) skewX(-22deg); } 100%{ transform: translate3d(360%,0,0) skewX(-22deg); } } @keyframes commandBorderMove{ 0%{ transform:translate3d(-150%,0,0); } 100%{ transform:translate3d(430%,0,0); } } @keyframes commandGlow{ from{ border-color:rgba(13,209,255,.45); box-shadow: 0 0 5px rgba(13,209,255,.20), 0 0 12px rgba(13,209,255,.08), inset 0 0 8px rgba(13,209,255,.05); } to{ border-color:rgba(54,209,255,.95); box-shadow: 0 0 10px rgba(13,209,255,.55), 0 0 23px rgba(13,209,255,.22), inset 0 0 13px rgba(13,209,255,.10); } } .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand), header button{ color:#fff !important; text-shadow:0 1px 3px #000 !important; } @media(max-width:880px){ .btn::before, .btn-primary::before, .btn-ghost::before, .pill::before, .balchip::before, header a:not(.brand)::before, header button::before{ animation-duration:1.9s !important; } } .brand-logo{ width:auto !important; height:68px !important; max-width:150px !important; object-fit:contain !important; display:block !important; } .brand{ flex:0 0 auto !important; padding:3px 5px !important; margin:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; } header{ min-height:82px !important; padding-top:6px !important; padding-bottom:6px !important; background: linear-gradient( 90deg, #000 0%, #030503 48%, #000 100% ) !important; border-bottom:1px solid rgba(17,209,255,.25) !important; box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 1px 7px rgba(15,209,255,.08) !important; } .hero::before{ background: radial-gradient( circle, rgba(16,209,255,.10), transparent 68% ) !important; opacity:.60 !important; filter:none !important; } .hero{ background: linear-gradient( 145deg, rgba(2,3,2,.98), rgba(7,10,7,.98) ) !important; border:1px solid rgba(18,209,255,.28) !important; box-shadow: 0 18px 42px rgba(0,0,0,.55), 0 0 16px rgba(14,209,255,.06), inset 0 1px 0 rgba(45,209,255,.04) !important; } #home-cats > *, .cats > *, .steps > *, .card, .plan-card, .product-card, .esim-card, .sms-card, .account-card{ background: linear-gradient( 145deg, rgba(3,5,3,.98), rgba(10,12,10,.98) ) !important; border:1px solid rgba(18,209,255,.24) !important; box-shadow: 0 14px 30px rgba(0,0,0,.48), 0 0 10px rgba(18,209,255,.045), inset 0 1px 0 rgba(45,209,255,.035) !important; } #home-cats > :nth-child(1), #home-cats > :nth-child(2), #home-cats > :nth-child(3){ border-color:rgba(18,209,255,.27) !important; box-shadow: 0 14px 30px rgba(0,0,0,.48), 0 0 11px rgba(18,209,255,.05) !important; } #home-cats > *::after, .cats > *::after{ content:"" !important; position:absolute !important; top:0 !important; left:12% !important; width:76% !important; height:1px !important; background: linear-gradient( 90deg, transparent, rgba(36,209,255,.70), transparent ) !important; opacity:.60 !important; } .hero h1 span, .sec-head h2 span{ background: linear-gradient( 90deg, #24cfff, #24cfff, #24cfff ) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } #home-cats h3, #home-cats h4, .card h3, .plan-card h3, .product-card h3{ color:#f5fff8 !important; } #home-cats a, #home-cats .meta, .stock, .available, .availability{ color:#24cfff !important; } .page{ padding-top:20px !important; } .sec-head{ margin-bottom:22px !important; } @media(max-width:760px){ header{ min-height:76px !important; } .brand-logo{ height:62px !important; max-width:130px !important; } .hero{ padding:25px 20px !important; border-radius:24px !important; } #home-cats > *, .cats > *, .card, .plan-card, .product-card, .esim-card{ border-radius:21px !important; } } @media(max-width:520px){ .brand-logo{ height:58px !important; max-width:115px !important; } .hero{ padding:24px 18px !important; } .page{ padding-top:16px !important; } } @media (max-width:760px){ header .wrap.nav{ display:grid !important; grid-template-columns: minmax(82px, .9fr) minmax(110px, 1.35fr) minmax(72px, .75fr) !important; grid-template-rows:auto auto !important; gap:10px 8px !important; align-items:center !important; width:100% !important; max-width:none !important; padding:10px 12px 12px !important; box-sizing:border-box !important; } header #nav-links{ display:none !important; } header #acct{ display:contents !important; } header .brand{ grid-column:1 !important; grid-row:1 !important; justify-self:start !important; align-self:center !important; width:auto !important; min-width:0 !important; padding:0 !important; } header .brand-logo{ width:76px !important; height:76px !important; max-width:76px !important; object-fit:contain !important; border-radius:10px !important; } header #acct > .who{ grid-column:2 !important; grid-row:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; width:100% !important; gap:7px !important; margin:0 !important; padding:0 !important; } header .who .avatar{ flex:0 0 38px !important; width:38px !important; height:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:15px !important; } header .who .nm{ display:block !important; max-width:105px !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; font-size:13px !important; } header #acct > .btn-sm.ghost{ grid-column:3 !important; grid-row:1 !important; width:100% !important; min-width:0 !important; min-height:44px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:8px 10px !important; font-size:13px !important; border-radius:12px !important; } header #supportLink{ grid-column:1 !important; grid-row:2 !important; } header .balchip{ grid-column:2 !important; grid-row:2 !important; } header #acct > a.link{ grid-column:3 !important; grid-row:2 !important; } header #supportLink, header .balchip, header #acct > a.link{ width:100% !important; min-width:0 !important; min-height:50px !important; margin:0 !important; padding:7px 8px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; font-size:12px !important; line-height:1.15 !important; border-radius:13px !important; } header .balchip{ gap:3px !important; flex-wrap:wrap !important; } header .balchip-lb{ display:block !important; width:100% !important; font-size:9px !important; line-height:1 !important; } header .balchip-v{ font-size:14px !important; font-weight:800 !important; } header .balchip-p{ width:18px !important; height:18px !important; flex:0 0 18px !important; } header #acct > a.link{ white-space:normal !important; } header #acct > span.link{ grid-column:2 !important; grid-row:2 !important; width:100% !important; min-height:50px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; border-radius:13px !important; } header #acct > .btn-sm.primary{ grid-column:3 !important; grid-row:2 !important; width:100% !important; min-height:50px !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:13px !important; } header{ min-height:0 !important; height:auto !important; } } @media (max-width:390px){ header .wrap.nav{ grid-template-columns: minmax(70px,.8fr) minmax(100px,1.3fr) minmax(66px,.75fr) !important; gap:8px 6px !important; padding-left:8px !important; padding-right:8px !important; } header .brand-logo{ width:68px !important; height:68px !important; max-width:68px !important; } header .who .nm{ max-width:82px !important; font-size:12px !important; } header #supportLink, header .balchip, header #acct > a.link{ font-size:11px !important; padding-left:5px !important; padding-right:5px !important; } } @media (max-width:760px){ header{ position:relative !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding:0 !important; } header .wrap.nav{ display:grid !important; grid-template-columns:70px minmax(0,1fr) !important; width:100% !important; max-width:none !important; height:auto !important; min-height:88px !important; gap:7px !important; align-items:center !important; padding:7px 8px !important; margin:0 !important; box-sizing:border-box !important; } header #nav-links{ display:none !important; } header .brand{ grid-column:1 !important; grid-row:1 !important; width:66px !important; height:74px !important; padding:0 !important; margin:0 !important; align-self:center !important; justify-self:center !important; display:flex !important; align-items:center !important; justify-content:center !important; border:none !important; background:transparent !important; box-shadow:none !important; } header .brand-logo{ width:64px !important; height:64px !important; max-width:64px !important; object-fit:contain !important; border-radius:9px !important; } header #acct{ grid-column:2 !important; grid-row:1 !important; display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr) !important; grid-template-rows:34px 40px !important; gap:5px !important; width:100% !important; min-width:0 !important; height:auto !important; min-height:79px !important; margin:0 !important; padding:0 !important; align-items:stretch !important; } header #acct > .who{ grid-column:1 / 3 !important; grid-row:1 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 5px !important; } header .who .avatar{ width:28px !important; height:28px !important; flex:0 0 28px !important; font-size:11px !important; } header .who .nm{ display:block !important; max-width:125px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:11px !important; line-height:1 !important; } header #acct > .btn-sm.ghost{ grid-column:3 !important; grid-row:1 !important; width:100% !important; height:34px !important; min-height:34px !important; margin:0 !important; padding:4px 7px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:11px !important; border-radius:10px !important; } header #supportLink{ grid-column:1 !important; grid-row:2 !important; } header .balchip{ grid-column:2 !important; grid-row:2 !important; } header #acct > a.link{ grid-column:3 !important; grid-row:2 !important; } header #supportLink, header .balchip, header #acct > a.link{ position:relative !important; width:100% !important; min-width:0 !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:4px 5px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; font-size:10px !important; line-height:1.05 !important; border-radius:10px !important; white-space:normal !important; } header .balchip{ gap:2px !important; flex-wrap:wrap !important; } header .balchip-lb{ display:block !important; width:100% !important; font-size:7px !important; line-height:7px !important; letter-spacing:.05em !important; } header .balchip-v{ font-size:11px !important; line-height:12px !important; font-weight:800 !important; } header .balchip-p{ width:14px !important; height:14px !important; flex:0 0 14px !important; font-size:10px !important; } header + main, main.wrap{ position:relative !important; clear:both !important; } } @media(max-width:390px){ header .wrap.nav{ grid-template-columns:62px minmax(0,1fr) !important; padding-left:5px !important; padding-right:5px !important; gap:5px !important; } header .brand{ width:58px !important; } header .brand-logo{ width:56px !important; height:56px !important; max-width:56px !important; } header #acct{ gap:4px !important; } header .who .nm{ max-width:100px !important; font-size:10px !important; } header #supportLink, header .balchip, header #acct > a.link{ font-size:9px !important; padding-left:3px !important; padding-right:3px !important; } } @media(max-width:760px){ header #acct{ gap:3px !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:34px 42px !important; } header #supportLink, header .balchip, header #acct > a.link{ height:42px !important; min-height:42px !important; padding:3px 5px !important; font-size:10px !important; line-height:1 !important; border-radius:10px !important; } header #acct > a.link{ white-space:nowrap !important; overflow:visible !important; font-size:10px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:3px !important; } header .balchip{ gap:1px !important; } header .balchip-lb{ font-size:7px !important; line-height:7px !important; } header .balchip-v{ font-size:11px !important; } } @media(max-width:390px){ header #acct{ gap:2px !important; } header #supportLink, header .balchip, header #acct > a.link{ font-size:9px !important; padding-left:2px !important; padding-right:2px !important; } } .conta-mobile{ display:none; } @media(max-width:760px){ html, body{ overflow-x:hidden !important; max-width:100% !important; } header, header .wrap.nav{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; } header #acct{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; column-gap:4px !important; } header #supportLink, header .balchip, header #acct > a.link{ width:100% !important; max-width:100% !important; min-width:0 !important; height:42px !important; min-height:42px !important; margin:0 !important; padding:3px 4px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; white-space:nowrap !important; font-size:10px !important; line-height:1 !important; } header .conta-full{ display:none !important; } header .conta-mobile{ display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; font-size:10px !important; } } @media(max-width:390px){ header #acct{ column-gap:3px !important; } header #supportLink, header .balchip, header #acct > a.link, header .conta-mobile{ font-size:9px !important; } } @media(max-width:760px){ header #supportLink, header #acct > a.link{ font-size:11.5px !important; font-weight:650 !important; } header .who .nm{ font-size:12px !important; font-weight:600 !important; max-width:135px !important; } header #acct > .btn-sm.ghost{ font-size:12px !important; font-weight:600 !important; } header .balchip-v{ font-size:12px !important; font-weight:800 !important; } header .balchip-lb{ font-size:7.5px !important; } header .conta-mobile{ font-size:11.5px !important; font-weight:650 !important; white-space:nowrap !important; } } @media(max-width:390px){ header #supportLink, header #acct > a.link, header .conta-mobile{ font-size:10.5px !important; } header .who .nm{ font-size:11px !important; max-width:110px !important; } } @media(max-width:760px){ header #acct:not(:has(.who)){ display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; grid-template-rows:46px !important; gap:5px !important; width:100% !important; min-width:0 !important; min-height:46px !important; height:46px !important; margin:0 !important; padding:0 !important; align-items:stretch !important; } header #acct:not(:has(.who)) #supportLink{ grid-column:1 !important; grid-row:1 !important; } header #acct:not(:has(.who)) > span.link{ grid-column:2 !important; grid-row:1 !important; } header #acct:not(:has(.who)) > .btn-sm.primary{ grid-column:3 !important; grid-row:1 !important; } header #acct:not(:has(.who)) #supportLink, header #acct:not(:has(.who)) > span.link, header #acct:not(:has(.who)) > .btn-sm.primary{ position:relative !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:46px !important; min-height:46px !important; margin:0 !important; padding:5px 6px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; white-space:nowrap !important; font-size:11.5px !important; font-weight:650 !important; line-height:1 !important; border-radius:11px !important; } header #acct:not(:has(.who)) > span.link{ cursor:pointer !important; color:#fff !important; background: linear-gradient( 135deg, #020804, #062313, #061b35, #031108 ) !important; border:1px solid rgba(24,209,255,.65) !important; box-shadow: 0 0 8px rgba(18,209,255,.25), 0 0 16px rgba(18,209,255,.10) !important; } header .wrap.nav:has(#acct:not(:has(.who))){ min-height:72px !important; grid-template-columns: 70px minmax(0,1fr) !important; padding-top:7px !important; padding-bottom:7px !important; } } @media(max-width:390px){ header #acct:not(:has(.who)){ gap:3px !important; } header #acct:not(:has(.who)) #supportLink, header #acct:not(:has(.who)) > span.link, header #acct:not(:has(.who)) > .btn-sm.primary{ font-size:10px !important; padding-left:3px !important; padding-right:3px !important; } } body{ background: radial-gradient(circle at 50% -200px,rgba(0,119,255,.12),transparent 520px), #03070d !important; } .hero{ max-width:1240px !important; margin:28px auto 64px !important; padding:70px 64px !important; min-height:520px !important; border-radius:30px !important; border:1px solid rgba(35,147,255,.26) !important; background: radial-gradient(circle at 82% 45%,rgba(0,145,255,.19),transparent 32%), linear-gradient(135deg,#071426 0%,#030914 52%,#07192f 100%) !important; box-shadow: 0 35px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important; } .hero h1{ color:#f4f8ff !important; font-size:clamp(40px,5vw,64px) !important; line-height:1.03 !important; letter-spacing:-2.5px !important; } .hero h1 span{ background:linear-gradient(90deg,#19ddff,#168cff,#5a65ff) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } .hero p{ color:#93a7bd !important; font-size:17px !important; line-height:1.7 !important; } .hero .btn-primary{ background:linear-gradient(135deg,#16dfff,#0b8cff,#3155ff) !important; color:#fff !important; box-shadow:0 14px 34px rgba(0,128,255,.28) !important; } .hero .btn-ghost{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.10) !important; color:#dce9f8 !important; } .hero .orb{ height:360px !important; filter:drop-shadow(0 0 35px rgba(0,132,255,.20)) !important; } .hero .orb .ring{ border-color:rgba(50,165,255,.22) !important; } .hero .orb .r1{ width:330px !important; height:330px !important; } .hero .orb .r2{ width:235px !important; height:235px !important; } .hero .orb .r3{ width:145px !important; height:145px !important; } .hero .orb .core{ width:130px !important; height:130px !important; background:radial-gradient(circle at 35% 30%,#39e8ff,#087dff 58%,#273cff) !important; color:#fff !important; box-shadow: 0 0 45px rgba(0,174,255,.50), 0 0 100px rgba(25,75,255,.25) !important; } #home-cats{ gap:16px !important; } #home-cats > *{ border-radius:18px !important; background: radial-gradient(circle at 90% 0%,rgba(23,137,255,.10),transparent 34%), linear-gradient(145deg,#0a1728,#050c16) !important; border:1px solid rgba(72,143,214,.18) !important; box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03) !important; transition:.22s ease !important; } #home-cats > *:hover{ transform:translateY(-5px) !important; border-color:rgba(35,177,255,.42) !important; box-shadow: 0 25px 60px rgba(0,0,0,.38), 0 0 24px rgba(0,119,255,.08) !important; } #home-cats h3{ color:#eef6ff !important; } #home-cats p{ color:#7890a8 !important; } .sec-head{ margin-bottom:30px !important; } .sec-head h2{ color:#f1f7ff !important; font-size:clamp(28px,3vw,40px) !important; letter-spacing:-1.3px !important; } .sec-head h2 span{ background:linear-gradient(90deg,#19dfff,#178cff) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } .sec-head p{ color:#71869c !important; } .steps{ gap:16px !important; } .steps > *{ border-radius:18px !important; border:1px solid rgba(72,143,214,.16) !important; background:linear-gradient(145deg,#091626,#050c16) !important; box-shadow:0 18px 45px rgba(0,0,0,.25) !important; transition:.22s ease !important; } .steps > *:hover{ transform:translateY(-4px) !important; border-color:rgba(36,175,255,.36) !important; } .step .n{ color:#219cff !important; } .step h4{ color:#edf6ff !important; } .step p{ color:#71869c !important; } .pill{ background:rgba(0,142,255,.10) !important; border:1px solid rgba(36,180,255,.25) !important; color:#65d8ff !important; } @media(max-width:800px){ .hero{ margin:16px 14px 48px !important; padding:48px 28px !important; min-height:auto !important; border-radius:24px !important; } .hero h1{ font-size:42px !important; letter-spacing:-1.8px !important; } .hero .orb{ height:310px !important; } } @media(max-width:520px){ .hero{ padding:38px 20px !important; } .hero h1{ font-size:36px !important; } .hero p{ font-size:14px !important; } .hero .cta{ display:grid !important; grid-template-columns:1fr !important; } .hero .cta .btn{ width:100% !important; text-align:center !important; } .hero .orb{ transform:scale(.82); margin:-20px 0 !important; } } .home-pro{ width:100%; overflow:hidden; background: radial-gradient(circle at 20% 0%,rgba(0,153,255,.08),transparent 32%), radial-gradient(circle at 90% 18%,rgba(34,85,255,.10),transparent 28%), #02060c; color:#fff; } .pro-hero{ max-width:1280px; margin:26px auto 70px; padding:72px; min-height:610px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:60px; position:relative; overflow:hidden; border-radius:32px; border:1px solid rgba(70,160,255,.20); background: linear-gradient(120deg,rgba(7,19,35,.96),rgba(3,9,18,.98)), #06111f; box-shadow:0 40px 100px rgba(0,0,0,.50); } .pro-hero:before{ content:""; position:absolute; width:520px; height:520px; right:-80px; top:20px; background:radial-gradient(circle,rgba(0,145,255,.24),transparent 68%); filter:blur(12px); pointer-events:none; } .pro-hero:after{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,transparent,black 30%,black); pointer-events:none; } .pro-hero-content{ position:relative; z-index:2; } .pro-badge{ display:inline-flex; align-items:center; padding:10px 16px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.7px; color:#73ddff; border:1px solid rgba(73,203,255,.26); background:rgba(0,128,255,.08); box-shadow:0 0 30px rgba(0,140,255,.08); } .pro-hero h1{ margin:22px 0 20px; font-size:clamp(48px,5.4vw,72px); line-height:.98; letter-spacing:-3.5px; color:#f5f9ff; } .pro-hero h1 span{ background:linear-gradient(90deg,#35e5ff,#168dff 55%,#6a5cff); -webkit-background-clip:text; background-clip:text; color:transparent; } .pro-hero-content > p{ max-width:590px; margin:0; color:#8ea4bb; font-size:18px; line-height:1.7; } .pro-actions{ display:flex; gap:14px; margin-top:30px; } .pro-btn{ min-height:52px; padding:0 24px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:800; transition:.2s ease; } .pro-btn.primary{ color:#fff; background:linear-gradient(135deg,#16cfff,#0a83ff,#3749ff); box-shadow:0 15px 38px rgba(0,115,255,.28); } .pro-btn.secondary{ color:#e8f3ff; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); } .pro-btn:hover{ transform:translateY(-2px); } .pro-trust{ margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .pro-trust div{ padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); } .pro-trust strong, .pro-trust small{ display:block; } .pro-trust strong{ font-size:13px; color:#eaf5ff; } .pro-trust small{ margin-top:5px; color:#647b92; font-size:11px; } .pro-visual{ position:relative; min-height:440px; display:flex; align-items:center; justify-content:center; z-index:2; } .pro-glow{ position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(0,153,255,.35),rgba(23,70,255,.12) 48%,transparent 70%); filter:blur(8px); } .esim-device{ width:330px; min-height:400px; padding:26px; border-radius:32px; position:relative; z-index:2; transform:rotate(4deg); background: radial-gradient(circle at 80% 10%,rgba(39,165,255,.18),transparent 28%), linear-gradient(145deg,#0c1d31,#050c16); border:1px solid rgba(80,176,255,.26); box-shadow: 0 35px 80px rgba(0,0,0,.48), 0 0 50px rgba(0,120,255,.12), inset 0 1px 0 rgba(255,255,255,.05); } .device-top{ display:flex; justify-content:space-between; font-size:11px; font-weight:800; letter-spacing:1px; color:#9bb6d0; } .online-dot{ color:#35d7ff; } .device-chip{ height:180px; display:flex; align-items:center; justify-content:center; } .chip-icon{ width:128px; height:128px; display:flex; align-items:center; justify-content:center; border-radius:32px; font-weight:900; font-size:26px; color:#fff; background:linear-gradient(145deg,#28dfff,#108cff 55%,#434dff); box-shadow: 0 0 40px rgba(0,157,255,.45), inset 0 1px 0 rgba(255,255,255,.28); } .device-info small, .device-info strong, .device-info span{ display:block; } .device-info small{ color:#51708f; font-size:10px; font-weight:800; letter-spacing:1.1px; } .device-info strong{ margin-top:8px; font-size:24px; color:#f5f9ff; } .device-info span{ margin-top:7px; color:#7d95ad; font-size:13px; } .device-status{ margin-top:24px; padding:14px 16px; display:flex; justify-content:space-between; border-radius:14px; color:#9adfff; background:rgba(0,133,255,.07); border:1px solid rgba(47,181,255,.16); } .float-card{ position:absolute; z-index:3; padding:12px 16px; border-radius:12px; font-size:12px; font-weight:800; color:#dff7ff; background:rgba(7,20,35,.88); border:1px solid rgba(69,185,255,.24); backdrop-filter:blur(14px); box-shadow:0 18px 45px rgba(0,0,0,.32); } .float-one{ left:0; top:92px; } .float-two{ right:-8px; bottom:80px; } .pro-section{ max-width:1280px; margin:0 auto; padding:60px 0; } .pro-section-head{ display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:32px; } .eyebrow{ color:#2ccfff; font-size:11px; font-weight:900; letter-spacing:1.5px; } .pro-section-head h2, .experience-card h2{ margin:9px 0 0; font-size:clamp(34px,4vw,50px); line-height:1.05; letter-spacing:-2px; color:#f5f9ff; } .pro-section-head h2 span, .experience-card h2 span{ color:#25b8ff; } .pro-section-head > p{ max-width:420px; color:#71869b; line-height:1.6; } #home-cats{ gap:18px !important; } #home-cats > *{ min-height:210px !important; border-radius:22px !important; border:1px solid rgba(65,155,235,.17) !important; background: radial-gradient(circle at 100% 0%,rgba(31,143,255,.13),transparent 30%), linear-gradient(145deg,#091725,#050b13) !important; box-shadow:0 24px 55px rgba(0,0,0,.30) !important; } .pro-benefits{ max-width:1280px; margin:30px auto 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .benefit{ padding:24px; border-radius:18px; display:flex; gap:16px; border:1px solid rgba(255,255,255,.06); background:#06101b; } .benefit-icon{ flex:0 0 auto; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:#46d5ff; font-weight:900; font-size:12px; background:rgba(0,137,255,.09); border:1px solid rgba(50,177,255,.16); } .benefit strong{ display:block; color:#edf7ff; font-size:14px; } .benefit p{ margin:8px 0 0; color:#667e95; font-size:12px; line-height:1.55; } .experience-card{ padding:44px; border-radius:26px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; border:1px solid rgba(63,154,235,.16); background: radial-gradient(circle at 90% 30%,rgba(0,132,255,.12),transparent 30%), linear-gradient(145deg,#081522,#040b12); } .experience-card p{ color:#758ca2; line-height:1.7; } .experience-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .experience-stats div{ padding:24px 14px; text-align:center; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); } .experience-stats strong, .experience-stats span{ display:block; } .experience-stats strong{ font-size:28px; color:#37cfff; } .experience-stats span{ margin-top:6px; color:#647b90; font-size:11px; } @media(max-width:900px){ .pro-hero{ margin:18px 16px 50px; padding:48px 30px; grid-template-columns:1fr; } .pro-visual{ min-height:390px; } .pro-section, .pro-benefits{ margin-left:18px; margin-right:18px; } .pro-benefits{ grid-template-columns:1fr 1fr; } .experience-card{ grid-template-columns:1fr; } } @media(max-width:560px){ .pro-hero{ padding:36px 20px; border-radius:24px; gap:34px; } .pro-hero h1{ font-size:43px; letter-spacing:-2.4px; } .pro-hero-content > p{ font-size:15px; } .pro-actions{ display:grid; grid-template-columns:1fr; } .pro-trust{ grid-template-columns:1fr; } .pro-visual{ min-height:360px; } .esim-device{ width:265px; min-height:350px; padding:20px; } .device-chip{ height:150px; } .chip-icon{ width:105px; height:105px; border-radius:26px; font-size:22px; } .float-card{ font-size:10px; padding:10px 12px; } .pro-section{ padding:44px 0; } .pro-section-head{ display:block; } .pro-section-head > p{ margin-top:14px; } .pro-benefits{ grid-template-columns:1fr; } .experience-card{ padding:28px 20px; } .experience-stats{ grid-template-columns:1fr; } } .phone-mockup{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; } .phone-shell{ width:300px; min-height:560px; padding:10px; border-radius:42px; position:relative; transform:rotate(4deg); background:linear-gradient(145deg,#162437,#05090f); border:1px solid rgba(107,185,255,.32); box-shadow: 0 45px 90px rgba(0,0,0,.55), 0 0 65px rgba(0,136,255,.16), inset 0 0 0 2px rgba(255,255,255,.025); } .phone-shell:before{ content:""; position:absolute; inset:4px; border-radius:38px; border:1px solid rgba(255,255,255,.05); pointer-events:none; } .phone-notch{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:92px; height:25px; border-radius:18px; background:#020509; z-index:4; box-shadow:0 2px 8px rgba(0,0,0,.6); } .phone-screen{ min-height:540px; padding:24px 20px; border-radius:34px; overflow:hidden; position:relative; background: radial-gradient(circle at 70% 8%,rgba(0,153,255,.20),transparent 28%), linear-gradient(180deg,#081523 0%,#050b13 55%,#07111d 100%); } .phone-screen:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; } .phone-status{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; margin-top:4px; font-size:10px; font-weight:700; color:#cfe8ff; } .phone-brand{ position:relative; z-index:2; margin-top:38px; } .phone-brand span{ display:block; font-size:13px; font-weight:900; letter-spacing:2px; color:#65dfff; } .phone-brand small{ display:block; margin-top:4px; font-size:10px; letter-spacing:1px; color:#56718a; } .phone-plan{ position:relative; z-index:2; margin-top:46px; padding:24px; border-radius:22px; background: radial-gradient(circle at 90% 0%,rgba(32,170,255,.18),transparent 35%), linear-gradient(145deg,rgba(14,32,52,.95),rgba(6,15,25,.98)); border:1px solid rgba(70,168,255,.20); box-shadow:0 18px 45px rgba(0,0,0,.28); } .plan-label{ display:block; font-size:9px; font-weight:900; letter-spacing:1.3px; color:#5b85a7; } .phone-plan strong{ display:block; margin-top:10px; font-size:52px; line-height:1; letter-spacing:-2px; background:linear-gradient(90deg,#56e5ff,#168cff,#655cff); -webkit-background-clip:text; background-clip:text; color:transparent; } .phone-plan small{ display:block; margin-top:8px; color:#8097ad; font-size:12px; } .usage-card{ position:relative; z-index:2; margin-top:18px; padding:18px; border-radius:18px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); } .usage-head{ display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#728ba2; } .usage-head b{ color:#eaf7ff; font-weight:800; } .usage-bar{ height:9px; margin-top:15px; border-radius:999px; overflow:hidden; background:#0d1a27; border:1px solid rgba(255,255,255,.04); } .usage-bar span{ display:block; width:27%; height:100%; border-radius:999px; background:linear-gradient(90deg,#22dfff,#168cff,#525bff); box-shadow:0 0 20px rgba(0,158,255,.45); } .usage-info{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:9px; color:#607a92; } .usage-info strong{ color:#62d9ff; font-weight:800; } .phone-details{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; } .phone-details div{ padding:15px; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); } .phone-details small, .phone-details strong{ display:block; } .phone-details small{ font-size:8px; letter-spacing:1px; color:#58728a; } .phone-details strong{ margin-top:6px; font-size:15px; color:#eef8ff; } @media(max-width:560px){ .phone-shell{ width:270px; min-height:500px; transform:rotate(2deg); } .phone-screen{ min-height:480px; padding:22px 18px; } .phone-plan{ margin-top:38px; } .phone-plan strong{ font-size:46px; } .pro-visual{ min-height:540px; } .float-one{ left:0; top:105px; } .float-two{ right:0; bottom:75px; } } .float-one, .float-two{ position:static !important; } .pro-visual{ display:grid !important; grid-template-columns:1fr 1fr !important; align-items:center !important; justify-items:center !important; gap:16px !important; } .phone-mockup{ grid-column:1 / -1 !important; } .float-one{ grid-column:1 !important; justify-self:end !important; } .float-two{ grid-column:2 !important; justify-self:start !important; } @media(max-width:560px){ .pro-visual{ grid-template-columns:1fr !important; } .phone-mockup, .float-one, .float-two{ grid-column:1 !important; } .float-one, .float-two{ justify-self:center !important; width:auto !important; margin:0 !important; } } .page{ max-width:1280px !important; } #grid.grid{ gap:22px !important; } #grid .card{ position:relative !important; overflow:hidden !important; padding:26px !important; min-height:290px !important; border-radius:24px !important; border:1px solid rgba(58,157,255,.22) !important; background: radial-gradient(circle at 100% 0%,rgba(0,144,255,.16),transparent 32%), linear-gradient(145deg,#091522 0%,#050b12 58%,#07111d 100%) !important; box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important; } #grid .card:before{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background: linear-gradient(120deg,rgba(255,255,255,.035),transparent 28%), radial-gradient(circle at 0% 100%,rgba(0,100,255,.08),transparent 35%) !important; } #grid .card:hover{ transform:translateY(-6px) scale(1.01) !important; border-color:rgba(45,185,255,.48) !important; box-shadow: 0 34px 80px rgba(0,0,0,.50), 0 0 35px rgba(0,120,255,.12) !important; } #grid .card h3{ position:relative !important; z-index:2 !important; margin-bottom:12px !important; color:#f3f8ff !important; font-size:18px !important; font-weight:900 !important; letter-spacing:.2px !important; } #grid .card h4, #grid .card .title{ position:relative !important; z-index:2 !important; color:#f3f8ff !important; } #grid .card .meta, #grid .card .tags{ position:relative !important; z-index:2 !important; } #grid .card .tag, #grid .card .badge{ border-radius:10px !important; border:1px solid rgba(64,159,255,.18) !important; background: linear-gradient(145deg,rgba(21,48,84,.95),rgba(10,23,43,.95)) !important; color:#b9d8f6 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.18) !important; } #grid .card .price{ position:relative !important; z-index:2 !important; margin:16px 0 12px !important; color:#ffffff !important; font-size:34px !important; font-weight:900 !important; letter-spacing:-1px !important; text-shadow:0 0 24px rgba(0,157,255,.10) !important; } #grid .stock{ position:relative !important; z-index:2 !important; display:inline-flex !important; align-items:center !important; gap:7px !important; padding:8px 11px !important; border-radius:999px !important; color:#24cfff !important; background:rgba(13,172,255,.07) !important; border:1px solid rgba(25,182,255,.14) !important; font-weight:700 !important; font-size:12px !important; } #grid .stock:before{ content:"" !important; width:7px !important; height:7px !important; flex:0 0 7px !important; border-radius:50% !important; background:#24cfff !important; box-shadow:0 0 12px rgba(24,181,255,.75) !important; } #grid .stepper{ position:relative !important; z-index:2 !important; height:50px !important; border-radius:13px !important; overflow:hidden !important; border:1px solid rgba(61,150,235,.22) !important; background:#07101a !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important; } #grid .stepper button{ min-width:46px !important; color:#bfe7ff !important; background: linear-gradient(145deg,#17385e,#0c213c) !important; border:0 !important; font-size:20px !important; transition:.18s ease !important; } #grid .stepper button:hover{ background: linear-gradient(145deg,#1c65a8,#0d3e76) !important; } #grid .stepper input{ color:#fff !important; background:#05090e !important; border:0 !important; font-weight:800 !important; text-align:center !important; } #grid .btn, #grid button[class*="buy"], #grid .buy{ position:relative !important; z-index:2 !important; min-height:50px !important; border-radius:13px !important; border:1px solid rgba(55,198,255,.28) !important; color:#fff !important; font-weight:900 !important; background: linear-gradient(135deg,#10cfff 0%,#0c87ff 52%,#3d4cff 100%) !important; box-shadow: 0 14px 32px rgba(0,115,255,.24), inset 0 1px 0 rgba(255,255,255,.16) !important; transition:.2s ease !important; } #grid .btn:hover, #grid button[class*="buy"]:hover, #grid .buy:hover{ transform:translateY(-2px) !important; box-shadow: 0 18px 38px rgba(0,128,255,.34), inset 0 1px 0 rgba(255,255,255,.18) !important; } #grid .card > *{ position:relative !important; z-index:2 !important; } @media(max-width:700px){ .page{ padding-left:18px !important; padding-right:18px !important; } #grid.grid{ gap:18px !important; } #grid .card{ padding:24px !important; min-height:300px !important; border-radius:22px !important; } #grid .card .price{ font-size:32px !important; } } header{ position:sticky !important; top:0 !important; z-index:1000 !important; border-bottom:1px solid rgba(58,150,235,.14) !important; background: linear-gradient(180deg,rgba(3,8,14,.96),rgba(4,10,17,.92)) !important; backdrop-filter:blur(18px) saturate(145%) !important; -webkit-backdrop-filter:blur(18px) saturate(145%) !important; box-shadow: 0 12px 40px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.02) !important; } header .wrap.nav{ max-width:1320px !important; min-height:82px !important; padding:12px 22px !important; display:grid !important; grid-template-columns:auto 1fr auto !important; align-items:center !important; gap:24px !important; } header .brand{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:92px !important; text-decoration:none !important; } header .brand:before{ content:"" !important; position:absolute !important; width:74px !important; height:74px !important; border-radius:50% !important; background:radial-gradient(circle,rgba(0,147,255,.24),transparent 68%) !important; filter:blur(8px) !important; opacity:.8 !important; } header .brand-logo{ position:relative !important; z-index:2 !important; width:74px !important; height:74px !important; object-fit:contain !important; filter: drop-shadow(0 0 7px rgba(0,181,255,.45)) drop-shadow(0 0 20px rgba(41,70,255,.18)) !important; transition:.22s ease !important; } header .brand:hover .brand-logo{ transform:translateY(-2px) scale(1.04) !important; filter: drop-shadow(0 0 9px rgba(0,210,255,.60)) drop-shadow(0 0 28px rgba(42,86,255,.30)) !important; } header .links{ display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; } header .links a, header .links button{ min-height:42px !important; padding:0 17px !important; border-radius:12px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; text-decoration:none !important; color:#b9cce0 !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.1px !important; border:1px solid rgba(255,255,255,.06) !important; background: linear-gradient(145deg,rgba(13,27,43,.90),rgba(6,14,23,.92)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.18) !important; transition:.2s ease !important; } header .links a:hover, header .links button:hover{ color:#fff !important; transform:translateY(-2px) !important; border-color:rgba(49,184,255,.30) !important; background: linear-gradient(145deg,rgba(13,50,83,.96),rgba(8,25,45,.96)) !important; box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 22px rgba(0,133,255,.10) !important; } header .links a.active, header .links a.on, header .links button.active, header .links button.on{ color:#fff !important; border-color:rgba(47,199,255,.38) !important; background: linear-gradient(135deg,#0daee9,#0d79f0 58%,#384cff) !important; box-shadow: 0 12px 30px rgba(0,119,255,.25), inset 0 1px 0 rgba(255,255,255,.18) !important; } header .right{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:10px !important; } header .right a, header .right button{ min-height:42px !important; padding:0 16px !important; border-radius:12px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; text-decoration:none !important; color:#d9e7f5 !important; font-size:13px !important; font-weight:800 !important; border:1px solid rgba(255,255,255,.07) !important; background:rgba(255,255,255,.025) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important; transition:.2s ease !important; } header .right a:hover, header .right button:hover{ color:#fff !important; transform:translateY(-2px) !important; border-color:rgba(47,184,255,.28) !important; background:rgba(15,64,104,.34) !important; } header .right a:last-child, header .right button:last-child{ border-color:rgba(49,196,255,.34) !important; background: linear-gradient(135deg,#0bbbe9,#0d82f5 58%,#374cff) !important; color:#fff !important; box-shadow: 0 12px 28px rgba(0,119,255,.22), inset 0 1px 0 rgba(255,255,255,.16) !important; } @media(max-width:900px){ header .wrap.nav{ grid-template-columns:auto 1fr !important; gap:12px !important; padding:10px 14px !important; } header .brand-logo{ width:62px !important; height:62px !important; } header .links{ order:3 !important; grid-column:1 / -1 !important; overflow-x:auto !important; flex-wrap:nowrap !important; padding-bottom:4px !important; scrollbar-width:none !important; } header .links::-webkit-scrollbar{ display:none !important; } header .right{ gap:7px !important; } } @media(max-width:560px){ header .wrap.nav{ min-height:auto !important; } header .brand{ min-width:64px !important; } header .brand-logo{ width:58px !important; height:58px !important; } header .right{ justify-self:end !important; } header .right a, header .right button{ min-height:38px !important; padding:0 11px !important; font-size:12px !important; } header .links a, header .links button{ min-height:39px !important; padding:0 15px !important; font-size:12px !important; white-space:nowrap !important; } } header{ background:rgba(3,8,14,.94) !important; border-bottom:1px solid rgba(41,132,210,.14) !important; box-shadow:0 10px 32px rgba(0,0,0,.30) !important; } header .wrap.nav{ min-height:72px !important; max-width:1320px !important; padding:10px 22px !important; grid-template-columns:auto 1fr auto !important; gap:22px !important; } header .brand.brand-text{ min-width:0 !important; display:flex !important; align-items:center !important; gap:10px !important; text-decoration:none !important; } header .brand.brand-text:before{ display:none !important; } .brand-cart{ font-size:24px !important; line-height:1 !important; filter:drop-shadow(0 0 10px rgba(0,174,255,.28)) !important; } .brand-copy{ display:flex !important; flex-direction:column !important; line-height:1 !important; } .brand-copy strong{ font-size:24px !important; font-weight:950 !important; letter-spacing:1px !important; background:linear-gradient(90deg,#ffffff,#74dbff,#168cff) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; text-shadow:0 0 22px rgba(0,145,255,.12) !important; } .brand-copy small{ margin-top:5px !important; font-size:8px !important; font-weight:900 !important; letter-spacing:2.4px !important; color:#68829a !important; } header .links{ gap:7px !important; } header .links a, header .links button{ min-height:40px !important; padding:0 15px !important; border-radius:11px !important; color:#9fb3c7 !important; border:1px solid rgba(255,255,255,.055) !important; background:#07111c !important; box-shadow:none !important; } header .links a:hover, header .links button:hover{ color:#fff !important; border-color:rgba(49,184,255,.26) !important; background:#0a1a2a !important; box-shadow:0 0 20px rgba(0,135,255,.08) !important; } header .links a.active, header .links a.on, header .links button.active, header .links button.on{ color:#fff !important; border-color:rgba(48,191,255,.35) !important; background:linear-gradient(135deg,#0d8fff,#155eff) !important; box-shadow:0 8px 22px rgba(0,111,255,.20) !important; } header .right a, header .right button{ min-height:40px !important; border-radius:11px !important; background:#07111c !important; border:1px solid rgba(255,255,255,.055) !important; color:#c7d5e3 !important; box-shadow:none !important; } header .right a:last-child, header .right button:last-child{ background:linear-gradient(135deg,#0d8fff,#155eff) !important; border-color:rgba(48,191,255,.34) !important; box-shadow:0 8px 22px rgba(0,111,255,.20) !important; } @media(max-width:560px){ header .wrap.nav{ padding:8px 12px !important; gap:10px !important; } .brand-cart{ font-size:20px !important; } .brand-copy strong{ font-size:20px !important; } .brand-copy small{ font-size:7px !important; letter-spacing:1.8px !important; } header .links{ grid-column:1 / -1 !important; overflow-x:auto !important; flex-wrap:nowrap !important; } } @media(max-width:700px){ header .wrap.nav{ width:100% !important; max-width:100% !important; min-height:auto !important; padding:12px 14px !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } header .brand.brand-text{ grid-column:1 !important; justify-self:start !important; margin:0 !important; padding:0 !important; transform:none !important; } .brand-cart{ font-size:18px !important; flex:0 0 auto !important; } .brand-copy strong{ font-size:19px !important; letter-spacing:.7px !important; } .brand-copy small{ margin-top:4px !important; font-size:6px !important; letter-spacing:1.7px !important; } header .right{ grid-column:1 !important; width:100% !important; display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center !important; gap:8px !important; justify-self:stretch !important; } header .right a, header .right button{ min-width:0 !important; min-height:38px !important; padding:0 10px !important; font-size:12px !important; white-space:nowrap !important; } header .links{ grid-column:1 !important; width:100% !important; display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:7px !important; padding:2px 0 4px !important; scrollbar-width:none !important; } header .links::-webkit-scrollbar{ display:none !important; } header .links a, header .links button{ flex:0 0 auto !important; min-height:37px !important; padding:0 14px !important; font-size:11px !important; white-space:nowrap !important; } } @media(max-width:700px){ header .brand.brand-text{ padding-left:10px !important; gap:8px !important; } .brand-cart{ margin-left:4px !important; position:relative !important; left:0 !important; transform:none !important; } } .brand-cart{ display:inline-flex !important; align-items:center !important; justify-content:center !important; transform-origin:center !important; animation: teknosCartFloat 2.8s ease-in-out infinite, teknosCartGlow 2.8s ease-in-out infinite !important; will-change:transform,filter !important; } @keyframes teknosCartFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 25%{ transform:translateY(-2px) rotate(-4deg); } 50%{ transform:translateY(0) rotate(0deg); } 75%{ transform:translateY(-1px) rotate(4deg); } } @keyframes teknosCartGlow{ 0%,100%{ filter:drop-shadow(0 0 4px rgba(0,174,255,.20)); } 50%{ filter: drop-shadow(0 0 8px rgba(0,198,255,.65)) drop-shadow(0 0 16px rgba(0,104,255,.30)); } } header .brand:hover .brand-cart{ animation-duration:1.3s !important; } .brand-cart{ animation: teknosCartFast 1.15s ease-in-out infinite, teknosCartGlowFast 1.15s ease-in-out infinite !important; } @keyframes teknosCartFast{ 0%,100%{ transform:translateY(0) rotate(0deg) !important; } 25%{ transform:translateY(-4px) rotate(-7deg) !important; } 50%{ transform:translateY(1px) rotate(0deg) !important; } 75%{ transform:translateY(-3px) rotate(7deg) !important; } } @keyframes teknosCartGlowFast{ 0%,100%{ filter:drop-shadow(0 0 3px rgba(0,174,255,.25)); } 50%{ filter: drop-shadow(0 0 9px rgba(0,210,255,.85)) drop-shadow(0 0 18px rgba(0,100,255,.45)); } } @media(max-width:700px){ .brand-cart{ transform-origin:center center !important; animation: teknosCartFast 1.15s ease-in-out infinite, teknosCartGlowFast 1.15s ease-in-out infinite !important; } } .brand-cart{ position:relative !important; top:0; animation:cartTeknosMove .65s ease-in-out infinite, cartTeknosLight .65s ease-in-out infinite !important; } @keyframes cartTeknosMove{ 0%,100% { top:0px; } 25% { top:-5px; } 50% { top:1px; } 75% { top:-3px; } } @keyframes cartTeknosLight{ 0%,100% { filter:drop-shadow(0 0 3px rgba(0,174,255,.25)); } 50% { filter:drop-shadow(0 0 10px rgba(0,210,255,.9)) drop-shadow(0 0 18px rgba(0,100,255,.5)); } } @media(max-width:700px){ .brand-cart{ position:relative !important; animation:cartTeknosMove .65s ease-in-out infinite, cartTeknosLight .65s ease-in-out infinite !important; } } @media(max-width:700px){ .brand-cart{ margin-left:16px !important; margin-right:2px !important; } } .brand-copy strong{ display:inline-block !important; position:relative !important; animation:teknosMove 1.1s ease-in-out infinite alternate !important; } @keyframes teknosMove{ from{ left:-3px; } to{ left:5px; } } header .right{ display:flex !important; align-items:center !important; gap:12px !important; } header .right > a, header .right > button{ position:relative !important; overflow:hidden !important; min-height:46px !important; padding:0 20px !important; border-radius:14px !important; color:#d8e6f4 !important; font-weight:800 !important; letter-spacing:.15px !important; border:1px solid rgba(78,151,215,.18) !important; background: radial-gradient(circle at 50% 0%,rgba(56,139,215,.08),transparent 55%), linear-gradient(180deg,#0d1825 0%,#07101a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.50), 0 10px 24px rgba(0,0,0,.30) !important; text-shadow:none !important; outline:none !important; transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease, color .20s ease !important; } header .right > a:after, header .right > button:after{ content:"" !important; position:absolute !important; top:0 !important; left:15% !important; width:70% !important; height:1px !important; background:linear-gradient( 90deg, transparent, rgba(100,210,255,.45), transparent ) !important; } header .right > :first-child{ border-color:rgba(51,164,234,.25) !important; background: radial-gradient(circle at 30% 0%,rgba(0,174,255,.13),transparent 55%), linear-gradient(180deg,#0e2030,#07121d) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.28), 0 0 18px rgba(0,136,255,.06) !important; } header .right > :nth-child(2){ color:#a9bdd1 !important; border-color:rgba(92,133,171,.12) !important; background: linear-gradient(180deg,#0a141f,#060d15) !important; } header .right > :last-child{ color:#fff !important; border:1px solid rgba(85,202,255,.45) !important; background: linear-gradient( 135deg, #17cfff 0%, #078cff 48%, #364fff 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,43,150,.28), 0 12px 30px rgba(0,112,255,.30), 0 0 24px rgba(0,174,255,.12) !important; } header .right > a:hover, header .right > button:hover{ transform:translateY(-3px) !important; color:#fff !important; border-color:rgba(77,194,255,.45) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.34), 0 0 25px rgba(0,145,255,.14) !important; } header .right > :last-child:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 36px rgba(0,117,255,.38), 0 0 32px rgba(0,191,255,.24) !important; } @media(max-width:700px){ header .right{ gap:8px !important; } header .right > a, header .right > button{ min-height:40px !important; padding:0 12px !important; border-radius:11px !important; font-size:12px !important; } } .phone-mockup{ animation:phoneFloatTeknos 2.2s ease-in-out infinite !important; will-change:transform !important; } @keyframes phoneFloatTeknos{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } } header #acct{ position:relative !important; display:flex !important; align-items:center !important; gap:5px !important; padding:5px !important; border-radius:18px !important; background: radial-gradient(circle at 20% 0%,rgba(0,153,255,.10),transparent 42%), linear-gradient(145deg,rgba(12,25,39,.96),rgba(5,12,20,.98)) !important; border:1px solid rgba(68,146,213,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 34px rgba(0,0,0,.32) !important; } header #acct > a, header #acct > button{ box-shadow:none !important; text-shadow:none !important; outline:none !important; border:1px solid transparent !important; background:transparent !important; min-height:42px !important; padding:0 17px !important; border-radius:12px !important; color:#91a7bd !important; font-weight:800 !important; transition: background .20s ease, color .20s ease, transform .20s ease, box-shadow .20s ease !important; } header #acct > :first-child{ color:#dcecff !important; background: linear-gradient(145deg,rgba(17,47,72,.86),rgba(8,22,35,.92)) !important; border-color:rgba(55,164,237,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important; } header #acct > :nth-child(2){ color:#8da5bc !important; background:transparent !important; } header #acct > :last-child{ color:#fff !important; background: linear-gradient( 135deg, #13c9ff 0%, #087fff 52%, #3c4cff 100% ) !important; border-color:rgba(94,205,255,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 20px rgba(0,108,255,.24) !important; } header #acct > :last-child:after{ content:"" !important; position:absolute !important; inset:1px !important; border-radius:10px !important; pointer-events:none !important; background: linear-gradient( 115deg, rgba(255,255,255,.13), transparent 32%, transparent 70% ) !important; } header #acct > a:hover, header #acct > button:hover{ color:#fff !important; transform:translateY(-2px) !important; background: linear-gradient(145deg,#112c44,#091725) !important; } header #acct > :last-child:hover{ background: linear-gradient( 135deg, #20ddff, #078dff 48%, #4b55ff ) !important; box-shadow: 0 10px 26px rgba(0,132,255,.38), 0 0 22px rgba(0,183,255,.14) !important; } @media(max-width:700px){ header #acct{ width:100% !important; padding:4px !important; gap:3px !important; border-radius:15px !important; } header #acct > a, header #acct > button{ flex:1 1 auto !important; min-width:0 !important; min-height:39px !important; padding:0 9px !important; border-radius:10px !important; font-size:12px !important; white-space:nowrap !important; } } body{ position:relative !important; min-height:100vh !important; overflow-x:hidden !important; background: radial-gradient(circle at 20% 15%,rgba(0,140,255,.18),transparent 28%), radial-gradient(circle at 80% 20%,rgba(39,70,255,.14),transparent 26%), radial-gradient(circle at 50% 85%,rgba(0,103,255,.10),transparent 34%), linear-gradient(180deg,#02070d 0%,#04101b 45%,#02070d 100%) !important; background-attachment:fixed !important; } body:before{ content:"" !important; position:fixed !important; inset:0 !important; z-index:-2 !important; pointer-events:none !important; background: linear-gradient(115deg,transparent 0 42%,rgba(0,180,255,.045) 43%,transparent 44% 100%), linear-gradient(65deg,transparent 0 58%,rgba(69,93,255,.04) 59%,transparent 60% 100%) !important; background-size: 340px 340px, 420px 420px !important; opacity:.75 !important; } body:after{ content:"" !important; position:fixed !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; background: linear-gradient( 118deg, transparent 0 18%, rgba(0,208,255,.0) 19%, rgba(0,208,255,.35) 19.4%, rgba(78,99,255,.55) 19.8%, transparent 20.4% 100% ), linear-gradient( 63deg, transparent 0 72%, rgba(0,180,255,.0) 72.3%, rgba(0,190,255,.28) 72.7%, rgba(45,73,255,.46) 73%, transparent 73.6% 100% ) !important; filter: blur(.3px) drop-shadow(0 0 7px rgba(0,190,255,.35)) drop-shadow(0 0 18px rgba(36,78,255,.20)) !important; opacity:.58 !important; animation:teknosLightning 5s ease-in-out infinite !important; } @keyframes teknosLightning{ 0%,88%,100%{ opacity:.16; } 90%{ opacity:.75; } 92%{ opacity:.26; } 94%{ opacity:.90; } 96%{ opacity:.20; } } header, main, footer{ position:relative !important; z-index:1 !important; } header #nav-links{ display:flex !important; align-items:center !important; gap:8px !important; } header #nav-links > a, header #nav-links > button{ position:relative !important; overflow:hidden !important; min-height:42px !important; padding:0 18px !important; border-radius:13px !important; color:#b8c9da !important; font-size:13px !important; font-weight:850 !important; letter-spacing:.2px !important; border:1px solid rgba(63,151,230,.15) !important; background: radial-gradient(circle at 50% 0%,rgba(0,153,255,.07),transparent 55%), linear-gradient(180deg,#0c1825,#07101a) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.22) !important; text-shadow:none !important; transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important; } header #nav-links > a:before, header #nav-links > button:before{ content:"" !important; position:absolute !important; top:0 !important; left:20% !important; width:60% !important; height:1px !important; background: linear-gradient( 90deg, transparent, rgba(67,197,255,.42), transparent ) !important; } header #nav-links > a:hover, header #nav-links > button:hover{ color:#ffffff !important; transform:translateY(-2px) !important; border-color:rgba(53,183,255,.32) !important; background: radial-gradient(circle at 50% 0%,rgba(0,174,255,.14),transparent 55%), linear-gradient(180deg,#10263a,#081522) !important; box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 18px rgba(0,139,255,.09) !important; } header #nav-links > a.active, header #nav-links > a.on, header #nav-links > button.active, header #nav-links > button.on{ color:#ffffff !important; border-color:rgba(78,201,255,.38) !important; background: linear-gradient( 135deg, #12c7ff 0%, #087fff 52%, #3a4fff 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 10px 24px rgba(0,105,255,.25), 0 0 20px rgba(0,176,255,.12) !important; } header #nav-links > a, header #nav-links > button{ outline:none !important; filter:none !important; } @media(max-width:700px){ header #nav-links{ gap:6px !important; } header #nav-links > a, header #nav-links > button{ min-height:38px !important; padding:0 14px !important; border-radius:10px !important; font-size:11px !important; white-space:nowrap !important; } } @media(max-width:700px){ header #nav-links{ width:100% !important; display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important; overflow:visible !important; padding:4px 0 2px !important; } header #nav-links > a, header #nav-links > button{ width:100% !important; min-width:0 !important; min-height:40px !important; padding:0 10px !important; border-radius:11px !important; font-size:12px !important; justify-content:center !important; text-align:center !important; white-space:nowrap !important; } } @media(max-width:700px){ header #nav-links{ width:100% !important; display:grid !important; grid-template-columns: minmax(65px,1fr) minmax(85px,1fr) 45px minmax(85px,1fr) minmax(60px,1fr) !important; grid-template-rows:44px !important; gap:5px !important; align-items:center !important; padding:8px 10px 12px !important; overflow:visible !important; } header #nav-links > :nth-child(1){ grid-column:1 !important; grid-row:1 !important; } header #nav-links > :nth-child(2){ grid-column:2 !important; grid-row:1 !important; } header #nav-links > :nth-child(3){ grid-column:4 !important; grid-row:1 !important; } header #nav-links > :nth-child(4){ grid-column:5 !important; grid-row:1 !important; } header #nav-links > a, header #nav-links > button{ width:100% !important; height:42px !important; min-width:0 !important; margin:0 !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:11px !important; white-space:nowrap !important; } header #nav-links:after{ display:none !important; content:none !important; } } @media(max-width:700px){ header .wrap.nav{ width:100% !important; max-width:100% !important; padding:12px 12px !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; overflow:hidden !important; } header .brand.brand-text{ grid-column:1 !important; justify-self:start !important; max-width:100% !important; } header #acct{ grid-column:1 !important; width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns:1.2fr .8fr 1.2fr !important; gap:6px !important; padding:4px !important; box-sizing:border-box !important; } header #acct > a, header #acct > button{ width:100% !important; min-width:0 !important; padding:0 7px !important; font-size:11px !important; white-space:nowrap !important; box-sizing:border-box !important; } header #nav-links{ grid-column:1 !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:visible !important; } } @media(max-width:700px){ header .wrap.nav{ width:100% !important; max-width:100% !important; padding:12px !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; overflow:visible !important; } header .brand.brand-text{ grid-column:1 !important; grid-row:1 !important; width:auto !important; max-width:100% !important; justify-self:start !important; position:relative !important; z-index:5 !important; display:flex !important; align-items:center !important; gap:8px !important; } .brand-cart{ margin-left:8px !important; flex:0 0 auto !important; } .brand-copy{ display:flex !important; flex-direction:column !important; } header #acct{ grid-column:1 !important; grid-row:2 !important; width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns:1.2fr .8fr 1.2fr !important; gap:6px !important; padding:4px !important; margin:0 !important; box-sizing:border-box !important; position:relative !important; z-index:4 !important; } header #acct > a, header #acct > button{ min-width:0 !important; width:100% !important; padding:0 8px !important; font-size:11px !important; white-space:nowrap !important; } header #nav-links{ grid-column:1 !important; grid-row:3 !important; width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box !important; } } @media(max-width:700px){ header #acct{ grid-template-columns:1fr 1fr 1fr !important; align-items:center !important; } header #acct > :nth-child(2){ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; width:100% !important; margin:0 !important; padding:0 !important; justify-self:center !important; } } .teknos-heartbeat{ display:block !important; width:330px !important; height:58px !important; margin-left:20px !important; position:relative !important; overflow:visible !important; } .teknos-heartbeat svg{ width:100% !important; height:100% !important; overflow:visible !important; } .pulse-line{ fill:none !important; stroke:#29dfff !important; stroke-width:4 !important; stroke-linecap:round !important; stroke-linejoin:round !important; filter: drop-shadow(0 0 4px rgba(0,220,255,.85)) drop-shadow(0 0 10px rgba(0,112,255,.55)) !important; stroke-dasharray:520 !important; stroke-dashoffset:520; animation:teknosPulseDraw 1.8s linear infinite !important; } .pulse-right{ animation-delay:.25s !important; } .pulse-name{ fill:#65e8ff !important; font-size:27px !important; font-weight:900 !important; letter-spacing:4px !important; filter: drop-shadow(0 0 4px rgba(0,220,255,.9)) drop-shadow(0 0 12px rgba(37,96,255,.55)) !important; animation:teknosPulseName .9s ease-in-out infinite alternate !important; } @keyframes teknosPulseDraw{ 0%{ stroke-dashoffset:520; opacity:.25; } 30%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:1; } } @keyframes teknosPulseName{ from{ opacity:.55; filter: drop-shadow(0 0 3px rgba(0,210,255,.45)); } to{ opacity:1; filter: drop-shadow(0 0 7px rgba(0,230,255,.95)) drop-shadow(0 0 18px rgba(38,81,255,.65)); } } @media(max-width:700px){ .teknos-heartbeat{ width:190px !important; height:42px !important; margin-left:10px !important; } .pulse-name{ font-size:23px !important; letter-spacing:3px !important; } } .phone-shell{ position:relative !important; isolation:isolate !important; } .phone-shell:after{ content:"" !important; position:absolute !important; inset:-7px !important; border-radius:46px !important; padding:2px !important; background: conic-gradient( from 0deg, transparent 0deg, transparent 35deg, #17d7ff 55deg, #167cff 75deg, #4d55ff 90deg, transparent 115deg, transparent 220deg, #18dcff 245deg, #168cff 270deg, #4b54ff 292deg, transparent 315deg ) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite:xor !important; mask-composite:exclude !important; filter: drop-shadow(0 0 8px rgba(0,210,255,.80)) drop-shadow(0 0 18px rgba(0,111,255,.55)) drop-shadow(0 0 28px rgba(69,75,255,.25)) !important; opacity:.95 !important; pointer-events:none !important; z-index:4 !important; animation:teknosPhoneBorderSpin 2.1s linear infinite !important; } .phone-shell:before{ content:"" !important; position:absolute !important; inset:-16px !important; border-radius:52px !important; background: radial-gradient( ellipse at center, transparent 58%, rgba(0,174,255,.11) 72%, transparent 82% ) !important; filter:blur(10px) !important; opacity:.65 !important; pointer-events:none !important; z-index:-1 !important; animation:teknosPhoneAura 1.4s ease-in-out infinite alternate !important; } @keyframes teknosPhoneBorderSpin{ from{ transform:rotate(0deg); filter: drop-shadow(0 0 7px rgba(0,210,255,.65)) drop-shadow(0 0 16px rgba(0,111,255,.45)); } 50%{ filter: drop-shadow(0 0 12px rgba(0,230,255,1)) drop-shadow(0 0 24px rgba(0,120,255,.72)) drop-shadow(0 0 36px rgba(70,77,255,.32)); } to{ transform:rotate(360deg); filter: drop-shadow(0 0 7px rgba(0,210,255,.65)) drop-shadow(0 0 16px rgba(0,111,255,.45)); } } @keyframes teknosPhoneAura{ from{ opacity:.35; transform:scale(.985); } to{ opacity:.85; transform:scale(1.015); } } .phone-shell:after{ display:none !important; content:none !important; } .phone-shell:before{ content:"" !important; position:absolute !important; inset:-8px !important; border-radius:48px !important; z-index:-1 !important; pointer-events:none !important; border:2px solid rgba(35,170,255,.22) !important; box-shadow: 0 0 10px rgba(0,200,255,.22), 0 0 22px rgba(0,120,255,.18), inset 0 0 10px rgba(0,170,255,.08) !important; background:transparent !important; filter:none !important; animation:phoneBluePulse 1.4s ease-in-out infinite alternate !important; } @keyframes phoneBluePulse{ from{ border-color:rgba(31,142,255,.20); box-shadow: 0 0 7px rgba(0,190,255,.16), 0 0 15px rgba(0,100,255,.12); } to{ border-color:rgba(63,220,255,.65); box-shadow: 0 0 14px rgba(0,225,255,.55), 0 0 28px rgba(0,120,255,.38), 0 0 42px rgba(72,76,255,.16); } } .phone-screen{ position:relative !important; } .phone-screen:after{ content:"" !important; position:absolute !important; width:70px !important; height:4px !important; top:4px !important; left:18px !important; border-radius:999px !important; background:linear-gradient( 90deg, transparent, #39eaff, #168cff, transparent ) !important; box-shadow: 0 0 8px rgba(0,225,255,.9), 0 0 16px rgba(0,120,255,.6) !important; animation:phoneLightRun 2s ease-in-out infinite alternate !important; pointer-events:none !important; z-index:5 !important; } @keyframes phoneLightRun{ from{ left:18px; opacity:.45; } to{ left:calc(100% - 90px); opacity:1; } } .phone-shell:before, .phone-shell:after{ display:none !important; content:none !important; } .phone-screen:after{ display:none !important; content:none !important; } .phone-shell{ position:relative !important; overflow:visible !important; } .phone-runner{ position:absolute !important; z-index:20 !important; width:58px !important; height:4px !important; border-radius:999px !important; background:linear-gradient( 90deg, transparent 0%, #16a8ff 25%, #50efff 55%, #3258ff 82%, transparent 100% ) !important; box-shadow: 0 0 6px #38e7ff, 0 0 14px rgba(0,174,255,.95), 0 0 26px rgba(54,76,255,.70) !important; offset-path:inset(2px round 40px) !important; offset-rotate:auto !important; pointer-events:none !important; } .runner-a{ animation: runnerA 3s linear infinite, runnerExplosion 3s ease-in-out infinite !important; } .runner-b{ animation: runnerB 3s linear infinite, runnerExplosion 3s ease-in-out infinite !important; } @keyframes runnerA{ from{ offset-distance:0%; } to{ offset-distance:100%; } } @keyframes runnerB{ from{ offset-distance:100%; } to{ offset-distance:0%; } } @keyframes runnerExplosion{ 0%,18%,32%,68%,82%,100%{ width:58px; height:4px; opacity:.82; box-shadow: 0 0 6px #38e7ff, 0 0 14px rgba(0,174,255,.85), 0 0 24px rgba(54,76,255,.55); } 24%,76%{ width:85px; height:6px; opacity:1; box-shadow: 0 0 10px #ffffff, 0 0 20px #35efff, 0 0 38px #078cff, 0 0 60px rgba(69,75,255,.85); } 27%,79%{ width:105px; height:8px; opacity:.95; box-shadow: 0 0 14px #ffffff, 0 0 28px #35efff, 0 0 52px #078cff, 0 0 85px rgba(69,75,255,.9); } } @media(max-width:560px){ .phone-runner{ width:48px !important; height:4px !important; offset-path:inset(2px round 36px) !important; } .runner-a, .runner-b{ animation-duration:2.6s !important; } } @media(min-width:701px){ header .brand.brand-text{ gap:8px !important; overflow:visible !important; } header .brand-copy{ flex:0 0 auto !important; min-width:115px !important; } header .brand-copy strong{ font-size:20px !important; letter-spacing:.8px !important; } header .brand-copy small{ font-size:7px !important; letter-spacing:2px !important; } header .teknos-heartbeat{ width:300px !important; height:52px !important; margin-left:18px !important; flex:0 0 300px !important; position:relative !important; z-index:1 !important; } } @media(min-width:701px){ header .brand.brand-text{ gap:8px !important; overflow:visible !important; } header .brand-copy{ flex:0 0 auto !important; min-width:115px !important; } header .brand-copy strong{ font-size:20px !important; letter-spacing:.8px !important; } header .brand-copy small{ font-size:7px !important; letter-spacing:2px !important; } header .teknos-heartbeat{ width:300px !important; height:52px !important; margin-left:18px !important; flex:0 0 300px !important; position:relative !important; z-index:1 !important; } } @media(min-width:701px){ header .brand.brand-text{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; overflow:visible !important; } header .brand-copy{ position:relative !important; z-index:10 !important; flex:0 0 125px !important; width:125px !important; min-width:125px !important; } header .brand-copy strong{ font-size:19px !important; } header .teknos-heartbeat{ position:relative !important; z-index:1 !important; width:260px !important; flex:0 0 260px !important; margin-left:42px !important; margin-right:12px !important; transform:none !important; } } @media(min-width:701px){ header .brand.brand-text{ position:relative !important; overflow:visible !important; padding-right:310px !important; } header .brand-copy{ position:relative !important; z-index:10 !important; } header .teknos-heartbeat{ position:absolute !important; left:165px !important; top:50% !important; width:270px !important; height:48px !important; margin:0 !important; transform:translateY(-50%) !important; z-index:2 !important; pointer-events:none !important; } header .teknos-heartbeat .pulse-name{ font-size:22px !important; letter-spacing:3px !important; } } header #nav-links > a, header #nav-links > button, header #acct > a, header #acct > button{ color:#dff6ff !important; border:1px solid rgba(42,174,255,.48) !important; background: linear-gradient(180deg,#0b1724 0%,#07101a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 8px rgba(0,170,255,.14), 0 0 16px rgba(0,105,255,.08) !important; animation:teknosTopBluePulse 1.7s ease-in-out infinite alternate !important; } header #nav-links > a:after, header #nav-links > button:after, header #acct > a:after, header #acct > button:after{ content:"" !important; position:absolute !important; top:0 !important; left:-90% !important; width:55% !important; height:100% !important; border-radius:inherit !important; background: linear-gradient( 110deg, transparent 0%, rgba(58,224,255,.06) 30%, rgba(86,226,255,.38) 50%, rgba(38,116,255,.15) 70%, transparent 100% ) !important; transform:skewX(-20deg) !important; animation:teknosTopSweep 2.8s linear infinite !important; pointer-events:none !important; } header #acct > :first-child{ color:#ffffff !important; border-color:rgba(48,198,255,.62) !important; background: linear-gradient(145deg,#0d263d,#081522) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 10px rgba(0,200,255,.18), 0 0 22px rgba(0,112,255,.12) !important; } header #acct > :nth-child(2){ color:#9db8ce !important; border-color:rgba(46,130,196,.18) !important; background:rgba(7,16,26,.72) !important; animation:none !important; } header #acct > :last-child{ color:#ffffff !important; border-color:rgba(71,217,255,.75) !important; background: linear-gradient( 135deg, #0bc9ff 0%, #087eff 52%, #394cff 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 12px rgba(0,218,255,.32), 0 0 28px rgba(0,112,255,.30) !important; } @keyframes teknosTopBluePulse{ from{ border-color:rgba(30,137,221,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 5px rgba(0,167,255,.10); } to{ border-color:rgba(69,218,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 10px rgba(0,220,255,.48), 0 0 22px rgba(0,118,255,.34), 0 0 34px rgba(64,76,255,.14); } } @keyframes teknosTopSweep{ 0%{ left:-90%; opacity:0; } 15%{ opacity:.9; } 55%{ opacity:.65; } 100%{ left:145%; opacity:0; } } header #nav-links > a:hover, header #nav-links > button:hover, header #acct > a:hover, header #acct > button:hover{ color:#fff !important; border-color:#58e7ff !important; background: linear-gradient(145deg,#10304a,#091a2a) !important; box-shadow: 0 0 12px rgba(0,225,255,.55), 0 0 26px rgba(0,112,255,.38) !important; } header #nav-links > a, header #nav-links > button, header #acct > a, header #acct > button{ position:relative !important; color:#e8f7ff !important; background:#07111d !important; background-image: linear-gradient( 145deg, #0b2034 0%, #07131f 48%, #050c15 100% ) !important; border:1px solid #168cff !important; outline:none !important; filter:none !important; text-shadow:none !important; box-shadow: inset 0 1px 0 rgba(151,226,255,.08), 0 0 6px rgba(23,177,255,.35), 0 0 13px rgba(0,113,255,.24), 0 0 22px rgba(22,59,160,.14) !important; animation:teknosBlueBorderV22 1.05s ease-in-out infinite alternate !important; } header #nav-links > a:before, header #nav-links > a:after, header #nav-links > button:before, header #nav-links > button:after, header #acct > a:before, header #acct > a:after, header #acct > button:before, header #acct > button:after{ content:none !important; display:none !important; background:none !important; } header #acct > :first-child{ background: linear-gradient( 145deg, #0e2942 0%, #081724 55%, #06101a 100% ) !important; border-color:#20c7ff !important; } header #acct > :nth-child(2){ color:#b5d4eb !important; background: linear-gradient( 145deg, #091a2a, #06101a ) !important; border-color:rgba(32,158,255,.55) !important; } header #acct > :last-child{ color:#fff !important; background: linear-gradient( 135deg, #082943 0%, #073d72 45%, #09245d 100% ) !important; border-color:#31d8ff !important; } @keyframes teknosBlueBorderV22{ 0%{ border-color:#126fc4; box-shadow: inset 0 1px 0 rgba(151,226,255,.05), 0 0 4px rgba(0,136,255,.22), 0 0 10px rgba(7,63,166,.18); } 50%{ border-color:#20cfff; box-shadow: inset 0 1px 0 rgba(200,245,255,.12), 0 0 8px rgba(38,218,255,.70), 0 0 18px rgba(0,137,255,.48), 0 0 28px rgba(33,63,187,.28); } 100%{ border-color:#537cff; box-shadow: inset 0 1px 0 rgba(125,205,255,.10), 0 0 7px rgba(35,171,255,.58), 0 0 17px rgba(44,90,255,.42), 0 0 27px rgba(10,41,125,.24); } } header #nav-links > a:hover, header #nav-links > button:hover, header #acct > a:hover, header #acct > button:hover{ color:#ffffff !important; border-color:#6aeaff !important; background: linear-gradient( 145deg, #103b5c, #082342 ) !important; box-shadow: 0 0 10px rgba(55,231,255,.85), 0 0 24px rgba(0,136,255,.62), 0 0 38px rgba(53,75,255,.30) !important; } @keyframes teknosNavBluePulse{ 0%,100%{ box-shadow: 0 0 4px rgba(0,170,255,.35), 0 0 8px rgba(0,170,255,.15); border-color: rgba(0,170,255,.35); } 50%{ box-shadow: 0 0 14px rgba(0,200,255,.9), 0 0 28px rgba(0,140,255,.55); border-color: rgba(0,210,255,1); } } header .links a, header .links button, header .right a, header .right button, header .support, header .lnk, header .btn-sm{ background: #0a1a2e !important; color: #cfefff !important; border: 1px solid rgba(0,170,255,.6) !important; animation: teknosNavBluePulse2 1.8s ease-in-out infinite !important; } @keyframes teknosNavBluePulse2{ 0%,100%{ box-shadow: 0 0 4px rgba(0,170,255,.35), 0 0 8px rgba(0,170,255,.15); border-color: rgba(0,170,255,.4); } 50%{ box-shadow: 0 0 16px rgba(0,200,255,1), 0 0 32px rgba(0,140,255,.65); border-color: rgba(0,220,255,1); } } header #nav-links > a, header #nav-links > button, header #acct > a, header #acct > button{ background: linear-gradient(180deg,#0b1724 0%,#07101a 100%) !important; color: #dff6ff !important; border: 1px solid rgba(0,170,255,.6) !important; animation: teknosNavBluePulse3 1.8s ease-in-out infinite !important; } header #nav-links > a:after, header #nav-links > button:after, header #acct > a:after, header #acct > button:after{ background: none !important; content: none !important; } @keyframes teknosNavBluePulse3{ 0%,100%{ box-shadow: 0 0 4px rgba(0,170,255,.35), 0 0 8px rgba(0,170,255,.15); border-color: rgba(0,170,255,.4); } 50%{ box-shadow: 0 0 16px rgba(0,200,255,1), 0 0 32px rgba(0,140,255,.65); border-color: rgba(0,220,255,1); } } header #nav-links > a, header #acct > a, header #acct > button, header #acct > span.lnk{ position:relative !important; color:#eaf8ff !important; background: linear-gradient( 145deg, #0b2137 0%, #071827 48%, #06101b 100% ) !important; border:1px solid #168cff !important; outline:none !important; box-shadow: 0 0 5px rgba(0,140,255,.35), 0 0 11px rgba(0,190,255,.22), inset 0 1px 0 rgba(160,230,255,.08) !important; text-shadow:none !important; filter:none !important; animation:teknosHeaderBlueV23 1.35s ease-in-out infinite alternate !important; } header #nav-links > a::before, header #nav-links > a::after, header #acct > a::before, header #acct > a::after, header #acct > button::before, header #acct > button::after, header #acct > span.lnk::before, header #acct > span.lnk::after{ content:none !important; display:none !important; background:none !important; box-shadow:none !important; } header #acct > button.primary{ color:#fff !important; background: linear-gradient( 135deg, #07315a 0%, #084b8d 50%, #071f49 100% ) !important; } header #acct > span.lnk{ cursor:pointer !important; background: linear-gradient( 145deg, #091c2d, #06121e ) !important; } @keyframes teknosHeaderBlueV23{ 0%{ border-color:#145da0; box-shadow: 0 0 4px rgba(0,95,190,.35), 0 0 9px rgba(8,55,145,.20); } 50%{ border-color:#29d8ff; box-shadow: 0 0 9px rgba(41,216,255,.85), 0 0 18px rgba(0,145,255,.55), 0 0 28px rgba(35,72,190,.28); } 100%{ border-color:#3c7dff; box-shadow: 0 0 7px rgba(40,185,255,.70), 0 0 16px rgba(32,105,255,.48), 0 0 25px rgba(12,38,110,.32); } } header #nav-links > a:hover, header #acct > a:hover, header #acct > button:hover, header #acct > span.lnk:hover{ border-color:#70ecff !important; color:#fff !important; box-shadow: 0 0 10px rgba(80,230,255,.95), 0 0 22px rgba(0,145,255,.65), 0 0 34px rgba(45,75,210,.35) !important; } header a:not(.brand), header .btn, header .btn-primary, header .btn-ghost, header .pill, header .balchip{ border-color:#168cff !important; animation:teknosHeaderBlueV23 1.35s ease-in-out infinite alternate !important; filter:none !important; box-shadow: 0 0 5px rgba(0,140,255,.35), 0 0 12px rgba(0,190,255,.22) !important; } header a:not(.brand)::after, header .btn::after, header .btn-primary::after, header .btn-ghost::after, header .pill::after, header .balchip::after{ content:none !important; display:none !important; background:none !important; box-shadow:none !important; } header #nav-links > a, header #acct > a, header #acct > span.lnk, header #acct > button{ color:#eefaff !important; background:linear-gradient(145deg,#0b2742 0%,#07192a 55%,#06111d 100%) !important; border:1px solid #159cff !important; filter:none !important; animation:teknosHeaderBlueV23 1.35s ease-in-out infinite alternate !important; } header #acct > button.primary, header #supportLink{ background:linear-gradient(135deg,#0a3157 0%,#07518d 48%,#071b3d 100%) !important; color:#fff !important; } header #nav-links > a::before, header #nav-links > a::after, header #acct > a::before, header #acct > a::after, header #acct > span.lnk::before, header #acct > span.lnk::after, header #acct > button::before, header #acct > button::after{ content:none !important; display:none !important; opacity:0 !important; background:none !important; animation:none !important; box-shadow:none !important; } header #nav-links > *, header #acct > a, header #acct > button, header #acct > span.lnk, header #supportLink{ background:#071827 !important; background-image:linear-gradient(145deg,#0b2742,#071827,#06111d) !important; color:#eefaff !important; border:1px solid #169cff !important; box-shadow: 0 0 6px rgba(0,170,255,.55), 0 0 16px rgba(0,110,255,.28) !important; filter:none !important; text-shadow:none !important; animation:headerBlueOnly 1.5s ease-in-out infinite alternate !important; } header #nav-links > *::before, header #nav-links > *::after, header #acct > *::before, header #acct > *::after, header #supportLink::before, header #supportLink::after{ content:none !important; display:none !important; opacity:0 !important; background:none !important; background-image:none !important; animation:none !important; box-shadow:none !important; filter:none !important; } @keyframes headerBlueOnly{ 0%{ border-color:#145da0; box-shadow: 0 0 5px rgba(0,100,210,.45), 0 0 12px rgba(7,48,140,.25); } 100%{ border-color:#42dcff; box-shadow: 0 0 10px rgba(66,220,255,.85), 0 0 22px rgba(0,125,255,.55), 0 0 30px rgba(26,48,150,.25); } } header #nav-links > a, header #acct > #supportLink, header #acct > a:not(.brand), header #acct > span.lnk, header #acct > button.btn-sm{ position:relative !important; overflow:hidden !important; color:#ffffff !important; background: linear-gradient(145deg,#071522 0%,#09243c 50%,#06111d 100%) !important; border:1px solid #20bfff !important; filter:none !important; text-shadow:none !important; box-shadow: 0 0 6px rgba(32,191,255,.55), 0 0 15px rgba(0,132,255,.35), 0 0 25px rgba(0,70,200,.18) !important; animation:topBluePulse 1.25s ease-in-out infinite alternate !important; } header #nav-links > a::before, header #acct > #supportLink::before, header #acct > a:not(.brand)::before, header #acct > span.lnk::before, header #acct > button.btn-sm::before{ content:none !important; display:none !important; } header #nav-links > a::after, header #acct > #supportLink::after, header #acct > a:not(.brand)::after, header #acct > span.lnk::after, header #acct > button.btn-sm::after{ content:"" !important; display:block !important; position:absolute !important; top:-35% !important; left:-70px !important; width:45px !important; height:170% !important; background:linear-gradient( 90deg, transparent 0%, rgba(170,235,255,0) 10%, rgba(120,220,255,.25) 35%, rgba(235,252,255,.92) 50%, rgba(40,175,255,.38) 65%, transparent 100% ) !important; transform:skewX(-18deg) !important; animation:topBlueSweep 2.7s linear infinite !important; pointer-events:none !important; } @keyframes topBluePulse{ 0%{ border-color:#075fc4; box-shadow: 0 0 4px rgba(0,100,255,.35), 0 0 10px rgba(0,60,170,.20); } 100%{ border-color:#57e5ff; box-shadow: 0 0 9px rgba(87,229,255,.90), 0 0 20px rgba(0,145,255,.58), 0 0 31px rgba(18,56,190,.32); } } @keyframes topBlueSweep{ 0%{ left:-70px; opacity:0; } 15%{ opacity:1; } 100%{ left:120%; opacity:0; } } .pro-hero-actions a, .pro-hero-actions .btn, .pro-hero-actions .btn-primary, .pro-hero-actions .btn-ghost{ color:#7dffb0 !important; } .pro-actions > a.pro-btn.primary, .pro-actions > a.pro-btn.secondary{ color:#7dffb0 !important; } header #nav-links > a, header #supportLink, header #acct > button.btn-sm.primary{ position:relative !important; overflow:hidden !important; color:#ffffff !important; background: linear-gradient(145deg,#06101c 0%,#09243d 50%,#06111e 100%) !important; border:1px solid #20bfff !important; box-shadow: 0 0 6px rgba(32,191,255,.55), 0 0 14px rgba(0,130,255,.32), 0 0 24px rgba(0,65,190,.18) !important; filter:none !important; animation:top6BluePulse 1.25s ease-in-out infinite alternate !important; } header #nav-links > a::before, header #supportLink::before, header #acct > button.btn-sm.primary::before{ content:none !important; display:none !important; } header #nav-links > a::after, header #supportLink::after, header #acct > button.btn-sm.primary::after{ content:"" !important; display:block !important; position:absolute !important; top:-35% !important; left:-65px !important; width:42px !important; height:170% !important; background:linear-gradient( 90deg, transparent 0%, rgba(80,190,255,0) 12%, rgba(60,190,255,.32) 34%, rgba(235,252,255,.95) 50%, rgba(25,145,255,.38) 67%, transparent 100% ) !important; transform:skewX(-18deg) !important; animation:top6BlueSweep 2.6s linear infinite !important; pointer-events:none !important; } @keyframes top6BluePulse{ 0%{ border-color:#075cb8; box-shadow: 0 0 4px rgba(0,105,255,.38), 0 0 10px rgba(0,55,165,.22); } 100%{ border-color:#55e6ff; box-shadow: 0 0 9px rgba(85,230,255,.90), 0 0 19px rgba(0,145,255,.60), 0 0 30px rgba(20,55,190,.30); } } @keyframes top6BlueSweep{ 0%{ left:-65px; opacity:0; } 15%{ opacity:1; } 100%{ left:120%; opacity:0; } } header #nav-links > a, header #supportLink, header #acct > button.btn-sm.primary{ color:#fff !important; border-color:#24cfff !important; background:linear-gradient(145deg,#06111d,#0a2944,#06111d) !important; box-shadow: 0 0 7px rgba(36,207,255,.60), 0 0 16px rgba(0,125,255,.38), inset 0 0 10px rgba(36,207,255,.08) !important; } header #nav-links > a::after, header #supportLink::after, header #acct > button.btn-sm.primary::after{ content:"" !important; position:absolute !important; bottom:0 !important; left:0 !important; width:32% !important; height:3px !important; border-radius:999px !important; background:linear-gradient( 90deg, transparent, #24cfff, #eafcff, #24cfff, transparent ) !important; box-shadow: 0 0 6px #24cfff, 0 0 14px rgba(14,209,255,.9) !important; transform:translate3d(-150%,0,0) !important; animation:commandBorderMove 1.55s linear infinite !important; } header #nav-links{ display:none !important; } @media (max-width: 760px){ .home-pro{ display:flex !important; flex-direction:column !important; } .pro-hero{ display:contents !important; } .pro-hero-content{ order:1 !important; } .categories-section{ order:2 !important; } .mobile-phone-order{ order:3 !important; } .pro-benefits{ order:4 !important; } .experience{ order:5 !important; } } .esim-product-card{ position:relative; overflow:hidden; } .operator-visual{ width:100%; min-height:92px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; border-radius:14px; background:rgba(255,255,255,.05); } .operator-logo{ display:block; width:auto; max-width:145px; max-height:62px; object-fit:contain; } .generic-esim-icon{ width:74px; height:52px; border:2px solid rgba(255,255,255,.35); border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:1px; } .esim-product-card.op-tim .operator-visual{ background:linear-gradient(135deg,rgba(0,38,93,.20),rgba(0,114,188,.10)); } .esim-product-card.op-claro .operator-visual{ background:linear-gradient(135deg,rgba(210,0,30,.18),rgba(255,255,255,.04)); } .esim-product-card.op-vivo .operator-visual{ background:linear-gradient(135deg,rgba(102,45,145,.20),rgba(255,255,255,.04)); } @media (max-width: 768px) { header, .mask, .modal, .modal-card { -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important; } .card, .product-card, .btn, .btn-primary, .btn-ghost, .pill, .balchip { box-shadow: 0 2px 8px rgba(0, 0, 0, .24) !important; } .btn, .btn-primary, .btn-ghost, .pill, .balchip, header a:not(.brand), header button { animation-duration: .2s !important; transition-duration: .15s !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media (max-width: 768px) { *, *::before, *::after { animation: none !important; transition-duration: .12s !important; } .spin { animation: sp .8s linear infinite !important; } header, .mask, .modal, .modal-card, .hero, .hero-banner, .card, .product, .product-media { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; } header, .mask, .modal, .modal-card, .hero, .hero-banner, .card, .product, .product-media, .btn, .btn-primary, .btn-ghost, .pill, .balchip { box-shadow: 0 2px 8px rgba(0, 0, 0, .24) !important; } }