/* =========================================================
   TicketGateway — Landing Page styles
   Palette pulled from app screenshots: cyan→aqua→mint.
   ========================================================= */
:root{
  --ink-900:#0B2540;
  --ink-800:#13314F;
  --ink-700:#22405F;
  --ink-500:#536878;
  --ink-400:#7A8A99;
  --ink-300:#B7C2CC;
  --ink-200:#E3E9EE;
  --ink-100:#F1F5F8;
  --bg:#F6FAFB;
  --paper:#FFFFFF;

  --brand-mint:#7BE3A8;
  --brand-aqua:#3FD7C7;
  --brand-cyan:#22C1E6;
  --brand-blue:#1B8FD6;
  --brand-deep:#0F6FB2;
  --brand-lime:#8FCE3F;

  --grad: linear-gradient(95deg, #7BE3A8 0%, #45D9C2 40%, #22C1E6 100%);
  --grad-vivid: linear-gradient(120deg, #6FE6A4 0%, #2FD1D8 50%, #1FA9E5 100%);
  --grad-soft: linear-gradient(180deg, #EEFBF7 0%, #E7F6FB 100%);

  --radius-sm:10px;
  --radius:18px;
  --radius-lg:24px;
  --radius-xl:32px;

  --shadow-sm:0 1px 2px rgba(15,40,70,.06), 0 2px 6px rgba(15,40,70,.04);
  --shadow:0 8px 20px -8px rgba(20,80,120,.18), 0 18px 40px -22px rgba(20,80,120,.22);
  --shadow-lg:0 30px 60px -28px rgba(20,80,120,.30), 0 12px 28px -10px rgba(20,80,120,.14);
  --shadow-glow:0 20px 50px -12px rgba(34,193,230,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins", system-ui, -apple-system, sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
em{font-style:italic;font-family:"Poppins",sans-serif;font-weight:500}

/* ---------- buttons ---------- */
.btn-grad{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.1rem;border-radius:999px;
  background:var(--grad);
  color:var(--ink-900);font-weight:700;font-size:.92rem;
  box-shadow:0 8px 22px -10px rgba(34,193,230,.55), inset 0 -2px 0 rgba(255,255,255,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn-grad:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 14px 28px -10px rgba(34,193,230,.65)}
.btn-grad.btn-lg{padding:.95rem 1.4rem;font-size:1rem;border-radius:14px}
.btn-grad.btn-block{display:flex;width:100%;justify-content:center;padding:1rem;font-size:1rem;border-radius:14px;margin-top:1.1rem}

.btn-ghost{
  display:inline-flex;align-items:center;
  padding:.55rem .95rem;border-radius:10px;
  font-weight:600;font-size:.92rem;color:var(--ink-800);
}
.btn-ghost:hover{background:rgba(15,40,70,.05)}

.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.4rem;border-radius:14px;
  background:#fff;color:var(--ink-900);font-weight:700;font-size:1rem;
  border:1px solid rgba(15,40,70,.12);
  box-shadow:var(--shadow-sm);
  transition:all .18s ease;
}
.btn-outline:hover{border-color:var(--brand-cyan);color:var(--brand-deep);transform:translateY(-1px)}

/* ---------- NAVBAR ---------- */
.nav-wrap{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);background:rgba(246,250,251,.7);border-bottom:1px solid rgba(15,40,70,.05)}
.nav{
  max-width:1280px;margin:0 auto;padding:1rem 2rem;
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
}
.brand{display:inline-flex;align-items:center;gap:.55rem}
.brand-logo{height:36px;width:auto;display:block}
.brand-logo-light{height:34px;filter:drop-shadow(0 0 1px rgba(255,255,255,.04))}
.brand-name{font-weight:800;letter-spacing:-.02em;font-size:1.15rem}
.brand-name-accent{background:var(--grad-vivid);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:.4rem;margin:0;padding:0;list-style:none;justify-content:center}
.nav-links a{padding:.55rem .9rem;border-radius:10px;font-size:.92rem;color:var(--ink-700);font-weight:500;transition:color .18s ease, background .18s ease}
.nav-links a:hover{color:var(--ink-900);background:rgba(15,40,70,.04)}
.nav-links a.active{color:var(--brand-deep);background:rgba(34,193,230,.10)}
.nav-cta{display:flex;align-items:center;gap:.4rem;justify-self:end}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--grad-soft);padding:5rem 2rem 7rem;border-bottom:1px solid rgba(15,40,70,.04)}
.hero-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:5rem;align-items:center;
  position:relative;z-index:2;
}

/* gradient orbs */
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;z-index:0;pointer-events:none}
.orb-1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%, #7BE3A8, transparent 70%);top:-160px;left:-160px}
.orb-2{width:600px;height:600px;background:radial-gradient(circle at 60% 40%, #22C1E6, transparent 70%);top:80px;right:-220px}
.orb-3{width:380px;height:380px;background:radial-gradient(circle at 50% 50%, #45D9C2, transparent 70%);bottom:-120px;left:35%;opacity:.4}

/* faint hex grid */
.hex-grid{
  position:absolute;inset:0;z-index:1;opacity:.18;pointer-events:none;
  background-image:
    radial-gradient(rgba(34,143,182,.18) 1.5px, transparent 1.5px),
    radial-gradient(rgba(34,143,182,.10) 1.5px, transparent 1.5px);
  background-size:42px 42px, 42px 42px;
  background-position:0 0, 21px 21px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* hero left */
.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem .85rem .45rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(34,193,230,.25);
  font-size:.82rem;font-weight:600;color:var(--ink-700);
  box-shadow:var(--shadow-sm);
}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-mint);box-shadow:0 0 0 4px rgba(123,227,168,.25)}

.hero-h1{
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.02;
  margin:1.5rem 0 1.2rem;
  color:var(--ink-900);
  text-wrap:balance;
}
.hero-h1 em{
  background:var(--grad-vivid);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:normal;line-height:1;
}
.hero-sub{
  font-size:1.1rem;line-height:1.55;color:var(--ink-500);
  max-width:520px;margin:0 0 2rem;
  text-wrap:pretty;
}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}

.trust{display:flex;align-items:center;gap:1rem}
.avatars{display:flex}
.av{width:36px;height:36px;border-radius:50%;border:3px solid #fff;margin-left:-10px;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.av:first-child{margin-left:0}
.av-1{background:linear-gradient(135deg,#FFB199,#FF7847)}
.av-2{background:linear-gradient(135deg,#A8E6CF,#3FD7C7)}
.av-3{background:linear-gradient(135deg,#FFD3B6,#FFAAA5)}
.av-4{background:linear-gradient(135deg,#B5E8FF,#22C1E6)}
.av-5{background:linear-gradient(135deg,#D5C6FF,#9B7BFF)}
.trust-text{font-size:.85rem;color:var(--ink-500);line-height:1.35}
.trust-text strong{color:var(--ink-900)}
.stars{display:flex;align-items:center;gap:.15rem;margin-bottom:.15rem}
.stars strong{margin-left:.4rem;font-size:.9rem}

/* ---------- LOGIN CARD ---------- */
.hero-right{position:relative;display:flex;justify-content:center}
.login-card{
  position:relative;z-index:3;
  width:100%;max-width:440px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;
  padding:2.2rem 2rem 1.8rem;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(34,193,230,.06);
}
.login-card::before{
  content:"";position:absolute;inset:0;border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,193,230,.10), transparent 60%),
    /* hex tile */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='60' viewBox='0 0 52 60'><g fill='none' stroke='%23BBD6E0' stroke-width='1' opacity='0.35'><polygon points='26,2 50,16 50,44 26,58 2,44 2,16'/></g></svg>");
  background-size:auto, 52px 60px;
  opacity:.35;pointer-events:none;
}
.login-card > *{position:relative;z-index:1}

.login-top{text-align:center;margin-bottom:1.4rem}
.login-logo{display:flex;justify-content:center;margin-bottom:.6rem}
.login-title{font-size:1.85rem;font-weight:800;letter-spacing:-.025em;margin:0}
.login-kicker{margin:.3rem 0 0;color:var(--ink-500);font-size:.9rem}

.social-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.1rem}
.social-btn{
  height:62px;background:#fff;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 0 rgba(15,40,70,.04), 0 6px 14px -8px rgba(15,40,70,.15);
  border:1px solid rgba(15,40,70,.04);
  transition:transform .18s ease, box-shadow .18s ease;
}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(15,40,70,.04), 0 10px 18px -8px rgba(15,40,70,.22)}

.divider{display:flex;align-items:center;gap:.7rem;margin:.4rem 0 1rem;color:var(--ink-400);font-size:.82rem}
.divider::before, .divider::after{content:"";flex:1;height:1px;background:rgba(15,40,70,.08)}

.tabs{display:flex;gap:1.4rem;margin-bottom:1rem;padding-bottom:.2rem}
.tab{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem 0;font-weight:600;color:var(--ink-500);font-size:.95rem;position:relative}
.tab .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-300);transition:all .18s ease;flex:none}
.tab.is-active{color:var(--ink-900)}
.tab.is-active .radio{border-color:var(--brand-cyan);background:radial-gradient(circle, var(--brand-cyan) 40%, transparent 45%)}

.pane{display:none;animation:fadein .25s ease}
.pane.is-active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.field{margin-bottom:.85rem}
.field label{display:block;font-size:.78rem;color:var(--ink-500);font-weight:600;margin-bottom:.3rem;letter-spacing:.01em}
.field input{
  width:100%;height:50px;padding:0 1rem;
  border-radius:12px;border:1px solid rgba(15,40,70,.10);
  background:#fff;color:var(--ink-900);font-size:.98rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus{outline:none;border-color:var(--brand-cyan);box-shadow:0 0 0 4px rgba(34,193,230,.15)}
.input-with-icon{position:relative}
.input-with-icon input{padding-right:2.6rem}
.eye{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);padding:.3rem}

.phone-input{display:flex;align-items:stretch;border-radius:12px;border:1px solid rgba(15,40,70,.10);background:#fff;overflow:hidden}
.cc{display:flex;align-items:center;gap:.35rem;padding:0 .8rem;border-right:1px solid rgba(15,40,70,.08);font-weight:600;color:var(--ink-800)}
.cc .flag{font-size:1.15rem}
.phone-input input{border:0;height:50px}
.phone-input input:focus{box-shadow:none}

.hint{font-size:.82rem;color:var(--ink-500);margin:0 0 .8rem;line-height:1.45}

.form-row{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;font-size:.85rem}
.check{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--ink-700)}
.check input{position:absolute;opacity:0;pointer-events:none}
.check span{width:18px;height:18px;border-radius:6px;background:var(--brand-cyan);display:inline-flex;align-items:center;justify-content:center;position:relative}
.check span::after{content:"";width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.link{color:var(--brand-deep);font-weight:600}
.link:hover{color:var(--brand-blue)}

.signup-line{text-align:center;font-size:.88rem;color:var(--ink-500);margin:1rem 0 0}

/* floating chips around login card */
.float-chip{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:.65rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);
  padding:.7rem .9rem;border-radius:14px;
  box-shadow:var(--shadow);
  font-size:.85rem;
}
.float-chip .chip-title{font-weight:700;color:var(--ink-900);font-size:.88rem}
.float-chip .chip-sub{color:var(--ink-500);font-size:.76rem}
.chip-ticket{top:6%;left:-2%;animation:float 6s ease-in-out infinite}
.chip-qr{bottom:8%;right:-4%;animation:float 7s ease-in-out infinite reverse}
.qr-mini{width:34px;height:34px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;background:#fff;padding:3px;border-radius:6px;border:1px solid rgba(15,40,70,.08)}
.qr-mini span{background:var(--ink-900);border-radius:1px}
.qr-mini span:nth-child(2),.qr-mini span:nth-child(4),.qr-mini span:nth-child(6),.qr-mini span:nth-child(8){background:#fff}

.float-badge{
  position:absolute;top:54%;right:-6%;z-index:4;
  background:var(--ink-900);color:#fff;
  padding:.5rem .8rem;border-radius:999px;
  font-size:.78rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:var(--shadow);
  animation:float 8s ease-in-out infinite;
}
.ping{width:7px;height:7px;border-radius:50%;background:var(--brand-mint);box-shadow:0 0 0 3px rgba(123,227,168,.35);animation:pingPulse 1.8s ease-out infinite}
@keyframes pingPulse{0%{box-shadow:0 0 0 0 rgba(123,227,168,.6)}80%,100%{box-shadow:0 0 0 8px rgba(123,227,168,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .nav-links{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero{padding:3rem 1.25rem 5rem}
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .hero-right{margin-top:1rem}
  .float-badge{right:0}
  .chip-ticket{left:0}
  .chip-qr{right:0}
}
@media (max-width:560px){
  .nav{padding:.85rem 1rem;gap:1rem}
  .nav-cta .btn-ghost{display:block;font-size:11px!important;}
  .hero-h1{font-size:2.4rem}
  .login-card{padding:1.8rem 1.4rem 1.4rem}
  .social-btn{height:54px}
  
  .why-grid{
	      grid-template-columns: repeat(2, 1fr)!important;
  }
  .why-card {
    padding: 0.6rem!important;
  }
  
.split-grid {
    display: block!important;
}

.btn-grad.btn-block {
	    font-size: 14px;

}
  .brand-logo {
    height: auto; 
	width: auto;
    display: block;
}
.btn-grad {
font-size:11px!important;
}
}