/* =========================================================
   Trust O — Poster Landing Page (redesign)
   Vanilla CSS, mobile-first, responsive on all devices.
   The page renders as a centered "poster" column on wide
   screens and fills the width on phones.
   ========================================================= */

/* ---------------- Tokens ---------------- */
:root{
  --green-950:#031a05;
  --green-900:#052908;
  --green-800:#0a3a0c;
  --green-700:#0f5412;
  --green-600:#16a34a;
  --green-500:#1fbb3a;
  --green-400:#2fd44d;
  --green-300:#5cf07a;
  --teal:#4ce0c0;

  --ink:#eafff0;
  --muted:#a7c7ad;
  --muted-2:#7f9d86;
  --card:#0b2410;
  --card-2:#0f2e15;
  --line:rgba(94,220,120,.18);
  --line-strong:rgba(94,220,120,.32);
  --white:#ffffff;

  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --radius-pill:999px;

  --shadow-green:0 14px 34px rgba(20,163,74,.38);
  --shadow-card:0 18px 44px rgba(0,0,0,.45);

  --poster:520px;              /* centered column width on desktop */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-bounce:cubic-bezier(.34,1.4,.5,1);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Deep green radial poster backdrop */
  background:
    radial-gradient(1100px 620px at 50% -6%, #0c5a1e 0%, #063a10 34%, #041f09 66%, #020c04 100%),
    #020c04;
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:800;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}

/* The poster column */
.poster{
  width:100%;
  max-width:var(--poster);
  margin:0 auto;
  padding:0 16px 40px;
}

/* ================= HEADER ================= */
.site-header{
  position:sticky;top:0;z-index:40;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  width:100%;max-width:var(--poster);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;
}
.brand{
  display:inline-flex;align-items:center;
  background:#fff;border-radius:12px;
  padding:6px 14px 6px 8px;
}
.brand img{height:34px;width:auto}

/* Register pill (header) */
.btn-register{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 26px;border-radius:var(--radius-pill);
  font-weight:800;font-style:italic;letter-spacing:.06em;text-transform:uppercase;
  font-size:.9rem;color:#04240c;
  background:linear-gradient(180deg,#5cf07a,#22c24a 90%);
  box-shadow:var(--shadow-green);
  border:1px solid rgba(255,255,255,.35);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn-register:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-register:active{transform:translateY(0)}

/* ================= HERO ================= */
.hero{
  position:relative;
  padding:26px 0 6px;
  text-align:center;
}
.hero h1{
  font-size:clamp(2rem,9vw,2.9rem);
  line-height:1.05;
  letter-spacing:-.03em;
}
.hero h1 .usdt{color:var(--teal)}
.hero h1 .grad{
  background:linear-gradient(90deg,#eafff0,#8affa6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin:14px auto 0;
  color:#d8ffe0;
  font-size:clamp(.95rem,3.6vw,1.12rem);
  font-weight:600;
}
.hero-sub .dot{color:var(--green-300);margin:0 6px}

/* ---- CSS hero visual: glowing shield + Tether coins + candles ---- */
.hero-art{
  position:relative;
  height:min(84vw,400px);
  margin:12px auto 4px;
  max-width:500px;
  /* dark green glow disc so the photo's black background blends in and the
     rectangle edges dissolve into the page (no visible box) */
  background:radial-gradient(62% 66% at 50% 44%, #06331a 0%, #04210d 42%, rgba(3,15,7,0) 74%);
}
.hero-art .ring{
  position:absolute;inset:8% 14% 6%;
  border:2px solid rgba(70,230,120,.35);
  border-radius:46% 46% 40% 40%/50% 50% 42% 42%;
  box-shadow:0 0 60px 8px rgba(40,210,80,.28) inset,0 0 40px rgba(40,210,80,.25);
  background:radial-gradient(120% 90% at 50% 30%,rgba(30,180,70,.18),transparent 60%);
}
.hero-art .candles{
  position:absolute;inset:0;opacity:.45;
  display:flex;align-items:flex-end;justify-content:center;gap:6px;
  padding:0 12%;pointer-events:none;
}
.hero-art .candles i{
  width:6px;border-radius:3px;
  background:linear-gradient(180deg,#37e05a,rgba(55,224,90,.15));
}
.hero-art .glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:70%;height:70%;
  background:radial-gradient(circle,rgba(40,220,90,.5),transparent 62%);
  filter:blur(10px);border-radius:50%;
}
/* Person photo — sits in front of the glow, behind the coins.
   The image has a solid black background; a radial mask feathers the
   rectangular edges so the black dissolves into the dark glow stage. */
.hero-art .hero-photo{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:100%;width:auto;max-width:none;z-index:2;
  object-fit:contain;object-position:bottom center;
  -webkit-mask-image:radial-gradient(78% 86% at 50% 46%, #000 60%, rgba(0,0,0,0) 88%);
          mask-image:radial-gradient(78% 86% at 50% 46%, #000 60%, rgba(0,0,0,0) 88%);
}
/* Tether coins */
.coin{
  z-index:3;
  position:absolute;
  display:grid;place-items:center;
  border-radius:50%;
  color:#eafff5;font-weight:800;
  background:
    radial-gradient(circle at 32% 28%,#3ee06f,#12933f 55%,#0c6b2c 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.06),
             inset 0 3px 8px rgba(255,255,255,.35),inset 0 -8px 14px rgba(0,0,0,.35);
}
.coin span{
  font-size:1.5em;line-height:1;transform:translateY(-1px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.coin.c-main{
  width:96px;height:96px;font-size:28px;
  left:30%;top:66%;transform:translate(-50%,-50%);
  animation:float 6s ease-in-out infinite;
}
.coin.c-left{
  width:64px;height:64px;font-size:19px;
  left:4%;top:76%;
  animation:float 5.2s ease-in-out infinite .4s;
}
.coin.c-right{
  width:70px;height:70px;font-size:21px;
  right:4%;top:34%;
  animation:float 5.6s ease-in-out infinite .8s;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.coin.c-main{animation-name:float-center}
@keyframes float-center{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 10px))}
}

/* ================= CTA BUTTONS ================= */
.cta-stack{
  display:flex;flex-direction:column;gap:16px;
  margin:22px 0 8px;
}
.cta{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;padding:18px 22px;
  border-radius:var(--radius-pill);
  font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.05rem,4.6vw,1.35rem);
  color:#04240c;
  background:linear-gradient(180deg,#63f281,#20c247 92%);
  box-shadow:var(--shadow-green),inset 0 2px 0 rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.cta:hover{transform:translateY(-3px);filter:brightness(1.05)}
.cta:active{transform:translateY(-1px)}
.cta .ico-badge{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:#05230d;color:#5cf07a;flex:0 0 auto;
}
.cta .ico-badge svg{width:18px;height:18px}
.cta .arrow{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:#05230d;color:#5cf07a;flex:0 0 auto;
}
.cta .arrow svg{width:18px;height:18px}
.cta .cta-label{flex:1 1 auto;text-align:center}

/* ================= FEATURE CARDS ================= */
.features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:26px 0 8px;
}
.feature{
  background:linear-gradient(180deg,rgba(20,70,32,.55),rgba(8,34,15,.55));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 12px;text-align:center;
}
.feature .f-ico{
  width:44px;height:44px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:12px;
  background:rgba(46,212,77,.12);color:var(--green-300);
  border:1px solid var(--line-strong);
}
.feature .f-ico svg{width:24px;height:24px}
.feature b{display:block;font-size:.92rem;color:#eafff0}
.feature small{display:block;color:var(--muted);font-size:.74rem;margin-top:3px}

/* ================= PAYMENT METHODS ================= */
.panel{
  background:linear-gradient(180deg,rgba(12,48,22,.6),rgba(6,26,12,.6));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px 16px;margin-top:16px;
}
.panel-title{
  display:flex;align-items:center;gap:10px;justify-content:center;
  color:#cfefd6;font-weight:700;font-size:.92rem;margin-bottom:14px;
}
.panel-title::before,.panel-title::after{
  content:"";height:1px;flex:1;max-width:36px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.pay-methods{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 4px;
}
.pay-methods .pm{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-style:italic;color:#eafff0;font-size:.98rem;
  padding:2px 4px;
}
.pay-methods .pm svg{width:18px;height:18px;color:var(--green-300)}
.pay-methods .sep{color:rgba(120,180,130,.5);font-weight:400;font-style:normal}

/* ================= RATES ================= */
.rates{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;
}
.rate-card{
  background:linear-gradient(180deg,rgba(16,58,26,.7),rgba(7,30,13,.7));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 12px;text-align:center;
}
.rate-card .rc-top{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:.95rem;color:#eafff0;
}
.rate-card .rc-top svg{width:18px;height:18px;color:var(--green-300)}
.rate-card .rc-unit{color:var(--muted);font-size:.78rem;margin:6px 0 8px}
.rate-card .rc-value{
  display:block;font-weight:800;font-size:1.35rem;color:#eafff0;
  padding:9px 6px;border-radius:12px;
  background:rgba(46,212,77,.1);
  border:1px solid var(--line-strong);
}
.rate-card .rc-via{
  display:block;margin-top:9px;font-size:.76rem;color:var(--green-300);font-weight:600;
}

/* ================= HAPPY USERS BAR ================= */
.happy{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,rgba(12,48,22,.7),rgba(6,26,12,.7));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px 16px;margin-top:16px;
}
.avatars{display:flex;flex:0 0 auto}
.avatars span{
  width:34px;height:34px;border-radius:50%;margin-left:-10px;
  border:2px solid #0a2410;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;color:#04240c;
  background:linear-gradient(160deg,#5cf07a,#1a9c3c);
}
.avatars span:first-child{margin-left:0}
.happy-mid{flex:1 1 auto;min-width:0}
.happy-mid b{display:block;font-size:.95rem;color:#eafff0}
.happy-mid .stars{color:#ffd54a;font-size:.85rem;letter-spacing:2px}
.happy-end{
  flex:0 0 auto;text-align:right;max-width:44%;
  font-size:.82rem;font-weight:700;color:#cfefd6;
  display:flex;align-items:center;gap:8px;
}
.happy-end svg{width:26px;height:26px;color:var(--green-300);flex:0 0 auto}
.happy-end b{color:var(--teal)}

/* ================= MODAL (registration popup) ================= */
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 14px;
  background:rgba(2,10,4,.72);
  backdrop-filter:blur(4px);
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  position:relative;width:100%;max-width:440px;margin:auto;
  background:#0a1f0e;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:24px 22px 26px;
  transform:translateY(18px) scale(.98);
  transition:transform .3s var(--ease-bounce);
}
.modal.open .modal-card{transform:translateY(0) scale(1)}
.modal-close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:#cfefd6;
  border:1px solid var(--line);
  transition:background .2s,transform .2s;
}
.modal-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.modal-close svg{width:18px;height:18px}

.modal-head{text-align:center;margin-bottom:8px}
.modal-head .m-logo{
  display:inline-flex;background:#fff;border-radius:10px;padding:6px 12px;margin-bottom:12px;
}
.modal-head .m-logo img{height:30px;width:auto}
.modal-head h2{font-size:1.4rem;color:#eafff0}
.modal-head p{color:var(--muted);font-size:.9rem;margin-top:4px}

.rate-strip{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(46,212,77,.1);border:1px solid var(--line-strong);
  border-radius:12px;padding:10px 14px;margin:14px 0 18px;
}
.rate-strip .rs-label{font-size:.78rem;color:var(--muted)}
.rate-strip .rs-val{font-weight:800;font-size:1.05rem;color:#eafff0}
.rate-strip .live-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:700;color:#04240c;
  background:var(--green-300);border-radius:999px;padding:3px 9px;
}
.rate-strip .live-pill i{
  width:7px;height:7px;border-radius:50%;background:#04240c;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- Form fields ---- */
.rc-field{margin-bottom:14px}
.rc-field > label{
  display:flex;align-items:center;gap:6px;
  font-size:.82rem;font-weight:600;color:#cfefd6;margin-bottom:6px;
}
.rc-field .opt{color:var(--muted-2);font-weight:400}
.label-ico{width:16px;height:16px;color:var(--green-300)}
.input-wrap{position:relative}
.input-wrap input{
  width:100%;padding:12px 14px;border-radius:12px;
  background:#06170a;color:#eafff0;
  border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s;
}
.input-wrap.has-toggle input{padding-right:44px}
.input-wrap input::placeholder{color:#5f7f68}
.input-wrap input:focus{
  outline:none;border-color:var(--green-400);
  box-shadow:0 0 0 3px rgba(46,212,77,.18);
}
.pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;
  color:var(--muted);border-radius:8px;
}
.pw-eye:hover{color:var(--green-300)}
.pw-eye svg{width:20px;height:20px}
.pw-eye.on{color:var(--green-300)}

.select-wrap{position:relative}
.select-wrap select{
  width:100%;padding:12px 40px 12px 14px;border-radius:12px;
  background:#06170a;color:#eafff0;border:1px solid var(--line);
  appearance:none;-webkit-appearance:none;
}
.select-wrap select:focus{outline:none;border-color:var(--green-400);box-shadow:0 0 0 3px rgba(46,212,77,.18)}
.sel-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}

.field-hint{font-size:.72rem;color:var(--muted-2);margin-top:5px}
.err-msg{display:block;font-size:.74rem;color:#ff8a8a;margin-top:5px;min-height:0}
.rc-field.invalid input,.rc-field.invalid select{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.14)}

.rc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* honeypot */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn-submit{
  width:100%;padding:15px;border-radius:12px;margin-top:4px;
  font-weight:800;font-size:1.02rem;color:#04240c;
  background:linear-gradient(180deg,#5cf07a,#20c247 92%);
  box-shadow:var(--shadow-green);
  transition:transform .2s var(--ease),filter .2s;
}
.btn-submit:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-submit:disabled{opacity:.7;cursor:not-allowed;transform:none}

.form-error{
  margin-top:12px;padding:10px 12px;border-radius:10px;
  background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.35);
  color:#ffb4b4;font-size:.85rem;text-align:center;
}
.rc-foot{
  display:flex;align-items:center;justify-content:center;gap:6px;
  color:var(--muted);font-size:.76rem;margin-top:14px;
}
.rc-foot svg{width:16px;height:16px}

.form-success{
  text-align:center;padding:20px 8px;
}
.form-success .fs-ico{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;color:#04240c;
  background:var(--green-300);
}
.form-success .fs-ico svg{width:30px;height:30px}
.form-success b{display:block;font-size:1.15rem;color:#eafff0;margin-bottom:4px}
.form-success span{color:var(--muted);font-size:.9rem}

/* ================= FOOTER NOTE ================= */
.foot-note{
  text-align:center;color:var(--muted-2);font-size:.75rem;
  margin-top:24px;padding-bottom:8px;
}

/* ================= RESPONSIVE ================= */
@media (max-width:400px){
  .features{grid-template-columns:repeat(3,1fr);gap:8px}
  .feature{padding:12px 6px}
  .feature small{font-size:.68rem}
  .rates{gap:8px}
  .rate-card .rc-value{font-size:1.15rem}
}
@media (min-width:560px){
  /* comfortable poster feel on tablets/desktops */
  .poster{padding-top:6px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}