:root{
  --bg:#08080D;
  --surface:#121218;
  --surface-2:#17171F;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text:#F4F4F7;
  --text-dim:#9A9AA8;
  --text-faint:#5C5C6A;

  --blue:#4F6BFF;
  --purple:#9B4FFF;
  --pink:#E14FD1;

  --icon-blue:#2F6BFF;
  --icon-purple:#8B3FE8;
  --icon-green:#12B981;
  --icon-orange:#F2994A;
  --icon-pink:#EC4899;

  --grad-primary: linear-gradient(115deg, var(--blue), var(--purple) 55%, var(--pink));
  --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

.ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(600px 400px at 82% 10%, rgba(155,79,255,0.14), transparent 60%),
    radial-gradient(500px 350px at 15% 70%, rgba(79,107,255,0.08), transparent 60%);
}

section, header, footer{position:relative; z-index:1;}

header{
  border-bottom:1px solid var(--border);
  background:rgba(8,8,13,0.7);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:50;
  padding:8px 0;
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  min-height:76px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(10,10,16,0.92);
  box-shadow:0 10px 34px rgba(0,0,0,0.22);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-mark{
  width:38px; height:38px;
  border-radius:50%;
  position:relative;
  flex-shrink:0;
  background:conic-gradient(from 210deg, var(--blue), var(--purple), var(--pink), var(--blue));
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-mark::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:var(--bg);
}
.logo-mark span{
  position:relative;
  z-index:2;
  font-weight:800;
  font-size:15px;
  background:var(--grad-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-text .full{font-weight:800; font-size:16px; letter-spacing:0.01em;}
.brand-text .sub{font-size:8.5px; letter-spacing:0.12em; color:var(--text-faint); margin-top:3px;}

.nav-links{
  display:flex;
  gap:34px;
  font-size:14px;
  color:var(--text-dim);
}
.nav-links a{transition:color .2s;}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--text);}

.btn-ibank{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border-strong);
  padding:10px 18px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:500;
  transition:border-color .2s, background .2s;
}
.btn-ibank:hover{border-color:var(--purple); background:rgba(155,79,255,0.06);}

.nav-toggle{display:none;}

.hero{padding:76px 0 60px;}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 0.95fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--text-faint);
  margin-bottom:22px;
}
.eyebrow .hl-blue{color:var(--blue);}
.eyebrow .hl-pink{color:var(--pink);}

h1.headline{
  font-size:clamp(34px, 4.4vw, 52px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.01em;
}

.hero-sub{
  margin-top:20px;
  font-size:16px;
  color:var(--text-dim);
  max-width:460px;
}

.cta-row{
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}
.btn{
  font-weight:600;
  font-size:14.5px;
  padding:14px 26px;
  border-radius:11px;
  display:inline-block;
  cursor:pointer;
  border:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--purple); outline-offset:3px;}
.btn-primary{
  background:var(--grad-primary);
  color:#fff;
  box-shadow:0 8px 26px rgba(155,79,255,0.28);
}
.btn-outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border-strong);
}
.btn-outline:hover{border-color:var(--text-dim);}

.fine-print{
  margin-top:16px;
  font-size:12px;
  color:var(--text-faint);
}

.card-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
}
.glow-ring{
  position:absolute;
  width:340px; height:340px;
  animation:spin 18s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .glow-ring{animation:none;} }
@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.pedestal{
  position:absolute;
  bottom:24px;
  width:210px; height:70px;
  background:linear-gradient(180deg, #1c1c26, #08080D);
  clip-path:polygon(8% 100%, 0% 30%, 22% 0%, 78% 0%, 100% 32%, 92% 100%);
  filter:blur(0.3px);
  box-shadow:0 30px 60px rgba(0,0,0,0.6);
}

.credit-card{
  position:relative;
  width:300px;
  aspect-ratio:1.586;
  border-radius:18px;
  padding:26px 24px;
  background:radial-gradient(120% 140% at 15% 0%, #2a2a38, #101017 55%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:rotate(-4deg);
  z-index:2;
}
.card-top{display:flex; justify-content:space-between; align-items:flex-start;}
.card-brand{font-weight:800; font-size:13px; letter-spacing:0.04em;}
.card-contactless{opacity:0.75;}

.card-chip{
  width:38px; height:28px;
  border-radius:5px;
  background:linear-gradient(135deg, #E8D9A8, #C9A227);
  position:relative;
  margin-top:8px;
}
.card-chip::before, .card-chip::after{
  content:"";
  position:absolute;
  background:rgba(0,0,0,0.25);
}
.card-chip::before{ top:50%; left:0; width:100%; height:1px; }
.card-chip::after{ top:0; left:50%; width:1px; height:100%; }

.card-number{
  font-family:var(--font-mono);
  font-size:16.5px;
  letter-spacing:0.05em;
  color:#EDEDF2;
}

.card-bottom{display:flex; justify-content:space-between; align-items:flex-end;}
.card-meta{display:flex; flex-direction:column; gap:2px;}
.card-meta .valid{font-size:8px; color:var(--text-faint); letter-spacing:0.06em;}
.card-meta .holder{font-size:11.5px; letter-spacing:0.06em; color:var(--text-dim); margin-top:4px;}
.card-network{font-weight:800; font-size:15px; font-style:italic; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}

.stats-bar{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  padding:34px 10px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin-top:20px;
}
.stat-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 24px;
  border-right:1px solid var(--border);
}
.stat-item:last-child{border-right:none;}
.stat-icon{
  width:44px; height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.stat-icon.c1{background:rgba(47,107,255,0.14); color:var(--icon-blue);}
.stat-icon.c2{background:rgba(139,63,232,0.14); color:var(--icon-purple);}
.stat-icon.c3{background:rgba(18,185,129,0.14); color:var(--icon-green);}
.stat-icon.c4{background:rgba(236,73,153,0.14); color:var(--icon-pink);}
.stat-item .num{font-size:19px; font-weight:800;}
.stat-item .label{font-size:12px; color:var(--text-dim); margin-top:2px;}

section{padding:88px 0;}
section[id]{scroll-margin-top:90px;}
body.modal-open{overflow:hidden;}
.section-head{margin-bottom:44px;}
.section-head h2{font-size:clamp(24px,3vw,32px); font-weight:800;}
.section-head p{margin-top:10px; color:var(--text-dim); font-size:15px;}

.products-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;}
.product-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .2s, transform .2s;
  cursor:pointer;
}
.product-card:hover{border-color:var(--border-strong); transform:translateY(-3px);}
.p-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.p-icon.c1{background:rgba(47,107,255,0.14); color:var(--icon-blue);}
.p-icon.c2{background:rgba(139,63,232,0.14); color:var(--icon-purple);}
.p-icon.c3{background:rgba(18,185,129,0.14); color:var(--icon-green);}
.p-icon.c4{background:rgba(242,153,74,0.14); color:var(--icon-orange);}
.p-icon.c5{background:rgba(236,73,153,0.14); color:var(--icon-pink);}
.product-card h3{font-size:16px; font-weight:700;}
.product-card p{font-size:13.5px; color:var(--text-dim); flex-grow:1; line-height:1.5;}
.product-card .more{font-size:13px; font-weight:600; color:var(--text); display:inline-flex; align-items:center; gap:5px;}
.product-card .more svg{transition:transform .2s;}
.product-card:hover .more svg{transform:translateX(3px);}

.banner{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:56px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:30px;
  overflow:hidden;
}
.banner h2{font-size:clamp(24px,3vw,32px); font-weight:800; line-height:1.2;}
.banner p{margin-top:14px; color:var(--text-dim); font-size:14.5px;}
.banner .btn{margin-top:22px;}
.banner .foot{margin-top:12px; font-size:11.5px; color:var(--text-faint);}
.crown-stage{position:relative; display:flex; align-items:center; justify-content:center; min-height:220px;}
.crown-glow{position:absolute; width:260px; height:260px; background:radial-gradient(circle, rgba(225,79,209,0.28), transparent 65%); filter:blur(6px);}

.why-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;}
.why-item .w-icon{width:40px; height:40px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); margin-bottom:16px;}
.why-item h4{font-size:15.5px; font-weight:700;}
.why-item p{margin-top:8px; font-size:13.5px; color:var(--text-dim); line-height:1.5;}

footer{border-top:1px solid var(--border); padding-top:64px; padding-bottom:30px;}
.footer-top{display:grid; grid-template-columns:1.2fr repeat(4, 1fr); gap:28px; padding-bottom:44px;}
.footer-col h5{font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:16px; letter-spacing:0.02em;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:13.5px; color:var(--text-dim); transition:color .2s;}
.footer-col a:hover{color:var(--text);} 
.social-row{display:flex; gap:10px;}
.social-row a{width:34px; height:34px; border-radius:9px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim);} 
.social-row a:hover{border-color:var(--purple); color:var(--text);} 
.support-phone{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:10px;}
.footer-bottom{border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:12px;}

.modal{position:fixed; inset:0; background:rgba(3,3,8,0.8); display:grid; place-items:center; padding:20px; z-index:100; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.modal.open{opacity:1; pointer-events:auto;}
.modal-dialog{width:min(560px, 100%); background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:28px; position:relative; box-shadow:0 24px 80px rgba(0,0,0,0.4);}
.modal-close{position:absolute; top:14px; right:14px; border:none; background:var(--surface-2); color:var(--text); width:36px; height:36px; border-radius:999px; cursor:pointer;}
.modal-form{display:grid; gap:12px; margin-top:20px;}
.modal-form input{border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:12px; padding:12px 14px; font:inherit;}
.modal-form input::placeholder{color:var(--text-faint);} 
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--border); color:var(--text); padding:12px 16px; border-radius:999px; box-shadow:0 16px 32px rgba(0,0,0,0.2); opacity:0; pointer-events:none; transition:all .25s ease; z-index:120;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .card-stage{order:-1; min-height:320px;}
  .stats-bar{grid-template-columns:repeat(2,1fr); gap:20px 0;}
  .stat-item{border-right:none; border-bottom:1px solid var(--border); padding-bottom:20px;}
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .banner{grid-template-columns:1fr; padding:36px 28px;}
  .crown-stage{order:-1;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:repeat(2,1fr);} 
}
@media(max-width:640px){
  .nav-links{position:fixed; top:0; right:0; bottom:0; width:min(78vw,300px); background:var(--surface); flex-direction:column; padding:100px 30px 30px; gap:24px; transform:translateX(100%); transition:transform .3s ease; border-left:1px solid var(--border); z-index:60;}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:70; padding:8px;}
  .nav-toggle span{width:20px; height:2px; background:var(--text);}
  .btn-ibank span.txt{display:none;}
  .products-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr; gap:32px;}
}