/* ============================================================
   CEX VPN — ACH Authorization · CEX Fjord / Glacier / Mint
   Matches the CEX VPN homepage visual system.
   Namespace: cex-ach-*
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

.cex-ach-wrap {
  --cex-fjord:#071022;
  --cex-fjord-2:#0c1730;
  --cex-glacier:#7a5cff;
  --cex-glacier-soft:#a3aedc;
  --cex-mint:#59f3d8;
  --cex-mint-deep:#24c3a6;
  --cex-mist:#f2f5fb;
  --cex-basalt:#2a2e33;
  --cex-white:#ffffff;
  --cex-copy:#d9e2f2;
  --cex-muted:#9aa9bf;
  --cex-dim:#718099;
  --cex-panel:rgba(12,23,48,.76);
  --cex-panel-strong:rgba(7,16,34,.90);
  --cex-border:rgba(163,174,220,.17);
  --cex-border-hover:rgba(89,243,216,.40);
  --cex-display:'Space Grotesk',system-ui,sans-serif;
  --cex-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cex-mono:'JetBrains Mono',ui-monospace,monospace;
  --cex-ease:cubic-bezier(.22,1,.36,1);
  --cex-radius:20px;
  --cex-radius-lg:28px;
  --cex-max:760px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(16px,3vw,34px);
  border:1px solid rgba(163,174,220,.16);
  border-radius:var(--cex-radius-lg);
  color:var(--cex-copy);
  background:
    radial-gradient(900px 540px at 9% 0%,rgba(122,92,255,.18),transparent 58%),
    radial-gradient(760px 500px at 94% 9%,rgba(89,243,216,.12),transparent 58%),
    linear-gradient(180deg,var(--cex-fjord-2),var(--cex-fjord));
  box-shadow:0 28px 80px rgba(4,8,20,.34),inset 0 1px 0 rgba(255,255,255,.04);
  font-family:var(--cex-body);
  -webkit-font-smoothing:antialiased;
}
.cex-ach-wrap *{box-sizing:border-box;}

.cex-ach-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.42;}
.cex-ach-bg{position:absolute;inset:-2px;z-index:0;overflow:hidden;pointer-events:none;}
.cex-ach-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(163,174,220,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(163,174,220,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 72%);}
.cex-ach-aurora{position:absolute;width:180%;left:-40%;filter:blur(88px);will-change:transform;}
.cex-ach-aurora--a{top:-15%;height:300px;background:linear-gradient(90deg,transparent 8%,rgba(122,92,255,.30) 28%,rgba(89,243,216,.18) 58%,transparent 84%);opacity:.46;animation:cexAchDrift 16s ease-in-out infinite alternate;}
.cex-ach-aurora--b{bottom:-10%;height:250px;background:linear-gradient(90deg,transparent 10%,rgba(89,243,216,.16) 35%,rgba(122,92,255,.18) 68%,transparent 86%);opacity:.28;animation:cexAchDrift 20s ease-in-out infinite alternate-reverse;}
.cex-ach-shell{position:relative;z-index:1;max-width:var(--cex-max);margin:0 auto;}

.cex-ach-hero,.cex-ach-card{position:relative;overflow:hidden;border:1px solid var(--cex-border);background:linear-gradient(180deg,rgba(12,23,48,.82),rgba(7,16,34,.74));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 48px rgba(4,8,20,.20);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);transition:border-color .25s ease,transform .25s var(--cex-ease),box-shadow .25s ease;}
.cex-ach-hero{padding:clamp(20px,3vw,32px);border-radius:var(--cex-radius-lg);}
.cex-ach-card{margin-top:16px;padding:clamp(18px,3vw,28px);border-radius:var(--cex-radius);}
.cex-ach-hero:hover,.cex-ach-card:hover{border-color:rgba(89,243,216,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 22px 56px rgba(4,8,20,.26);}
.cex-ach-hero__glow,.cex-ach-card__glow{position:absolute;inset:-1px;pointer-events:none;opacity:.72;transition:opacity .3s ease;}
.cex-ach-hero__glow{background:radial-gradient(650px 210px at 8% 0%,rgba(122,92,255,.18),transparent 58%),radial-gradient(560px 210px at 94% 0%,rgba(89,243,216,.12),transparent 58%);}
.cex-ach-card__glow{background:radial-gradient(500px 190px at 5% 0%,rgba(122,92,255,.08),transparent 60%),radial-gradient(430px 190px at 100% 100%,rgba(89,243,216,.06),transparent 62%);}
.cex-ach-hero:hover .cex-ach-hero__glow,.cex-ach-card:hover .cex-ach-card__glow{opacity:1;}

.cex-ach-badge{position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid rgba(89,243,216,.25);border-radius:999px;background:rgba(89,243,216,.07);color:var(--cex-mint);font:600 11px/1 var(--cex-mono);letter-spacing:.15em;text-transform:uppercase;}
.cex-ach-badge__dot{width:7px;height:7px;border-radius:50%;background:var(--cex-mint);box-shadow:0 0 0 4px rgba(89,243,216,.10),0 0 18px rgba(89,243,216,.55);animation:cexAchPulse 2.2s ease-in-out infinite;}
.cex-ach-title{position:relative;margin:16px 0 7px;color:var(--cex-white);font:700 clamp(25px,4.5vw,40px)/1.08 var(--cex-display);letter-spacing:-.035em;}
.cex-ach-title::after{content:"";display:block;width:88px;height:3px;margin-top:14px;border-radius:999px;background:linear-gradient(90deg,var(--cex-glacier),var(--cex-mint));box-shadow:0 0 20px rgba(89,243,216,.20);}
.cex-ach-subtitle{position:relative;margin:0;color:var(--cex-muted);font-size:14.5px;line-height:1.65;}

.cex-ach-messages .cex-ach-success,.cex-ach-messages .cex-ach-error{margin-bottom:16px;padding:14px 16px;border:1px solid;border-radius:14px;font-weight:600;line-height:1.5;}
.cex-ach-success{color:#b9fff3;border-color:rgba(89,243,216,.28)!important;background:rgba(89,243,216,.075)!important;}
.cex-ach-error{color:#ffc0ca;border-color:rgba(255,122,107,.32)!important;background:rgba(255,122,107,.075)!important;}

.cex-ach-form{position:relative;margin-top:0;}
.cex-ach-field{margin-top:15px;}
.cex-ach-label{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--cex-glacier-soft);font:600 11px/1.35 var(--cex-mono);letter-spacing:.105em;text-transform:uppercase;}
.cex-ach-label svg{opacity:.8;color:var(--cex-mint);}
.cex-ach-input,.cex-ach-select{display:block;width:100%;max-width:100%;min-width:0;padding:13px 14px;border:1px solid rgba(163,174,220,.18);border-radius:13px;outline:none;background:rgba(4,8,20,.34);color:var(--cex-white);font:500 15px/1.4 var(--cex-body);box-shadow:inset 0 1px 0 rgba(255,255,255,.02);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;}
.cex-ach-input::placeholder{color:#66758d;font-weight:400;}
.cex-ach-input:hover,.cex-ach-select:hover{border-color:rgba(163,174,220,.32);}
.cex-ach-input:focus,.cex-ach-select:focus{border-color:var(--cex-mint);background:rgba(7,16,34,.70);box-shadow:0 0 0 3px rgba(89,243,216,.14),0 10px 26px rgba(4,8,20,.20);}
.cex-ach-input[readonly]{color:#cbd5e5;background:rgba(163,174,220,.055);cursor:default;}
.cex-ach-select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cex-mint) 50%),linear-gradient(135deg,var(--cex-mint) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;}
.cex-ach-select option{color:var(--cex-basalt);background:var(--cex-white);}
.cex-ach-row{display:grid;gap:13px;margin-top:15px;}
@media(min-width:720px){.cex-ach-row--3{grid-template-columns:1fr 1fr 1fr}.cex-ach-row--2{grid-template-columns:1fr 1fr}.cex-ach-row--promo{grid-template-columns:1fr auto;align-items:end}}
.cex-ach-help{margin-top:7px;color:var(--cex-dim);font-size:12.75px;line-height:1.55;}
.cex-ach-divider{height:1px;margin:22px 0;background:linear-gradient(90deg,transparent,rgba(122,92,255,.34),rgba(89,243,216,.32),transparent);}

.cex-ach-btn,.cex-ach-btn-secondary{border-radius:13px;padding:13px 17px;font:700 14px/1.2 var(--cex-body);cursor:pointer;transition:transform .2s var(--cex-ease),box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease;}
.cex-ach-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;overflow:hidden;margin-top:19px;border:1px solid rgba(89,243,216,.64);color:var(--cex-fjord);background:linear-gradient(135deg,#74f8e3,var(--cex-mint) 46%,var(--cex-mint-deep));box-shadow:0 12px 30px rgba(36,195,166,.18),inset 0 1px 0 rgba(255,255,255,.35);font-size:15px;}
.cex-ach-btn__shimmer{position:absolute;inset:-70%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);transform:translateX(-105%);animation:cexAchShimmer 3.6s ease-in-out infinite;}
.cex-ach-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#86fbe8,#67f5dd 46%,#2dd0b1);box-shadow:0 16px 38px rgba(89,243,216,.28);}
.cex-ach-btn:focus-visible,.cex-ach-btn-secondary:focus-visible{outline:3px solid rgba(122,92,255,.45);outline-offset:3px;}
.cex-ach-btn-secondary{border:1px solid rgba(163,174,220,.22);background:rgba(163,174,220,.07);color:var(--cex-white);white-space:nowrap;}
.cex-ach-btn-secondary:hover{transform:translateY(-1px);border-color:rgba(122,92,255,.56);background:rgba(122,92,255,.14);box-shadow:0 10px 24px rgba(4,8,20,.24);}

.cex-ach-signature{padding:10px;border:1px solid rgba(163,174,220,.20);border-radius:14px;background:rgba(4,8,20,.32);transition:border-color .2s ease,box-shadow .2s ease;}
.cex-ach-signature:hover{border-color:rgba(89,243,216,.38);}
.cex-ach-signature:focus-within{border-color:var(--cex-mint);box-shadow:0 0 0 3px rgba(89,243,216,.12);}
.cex-ach-signature canvas{display:block;width:100%;height:120px;border-radius:10px;background:linear-gradient(180deg,rgba(242,245,251,.98),rgba(224,231,242,.98));touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;overscroll-behavior:contain;}
.cex-ach-signature canvas:focus{outline:3px solid rgba(89,243,216,.35);outline-offset:3px;}
.cex-ach-help.is-error{color:#ff9acb!important;font-weight:700;}
.cex-ach-signature-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}

.cex-ach-checkbox{display:flex;align-items:flex-start;gap:13px;margin-top:18px;padding:15px 16px;border:1px solid rgba(163,174,220,.18);border-radius:14px;background:rgba(4,8,20,.25);transition:border-color .2s ease,background .2s ease;}
.cex-ach-checkbox:hover{border-color:rgba(89,243,216,.32);background:rgba(89,243,216,.035);}
.cex-ach-checkbox input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--cex-mint-deep);}
.cex-ach-checkbox label{margin:0;color:var(--cex-muted);font-size:13.5px;line-height:1.62;font-weight:400;}
.cex-ach-checkbox label strong{color:var(--cex-mint);font-weight:700;}

[data-cex-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--cex-ease),transform .6s var(--cex-ease);}
[data-cex-reveal].is-visible{opacity:1;transform:translateY(0);}

@media(max-width:719px){.cex-ach-row--promo{grid-template-columns:1fr}.cex-ach-row--promo .cex-ach-btn-secondary{width:100%}}
@media(max-width:420px){.cex-ach-wrap{padding:12px;border-radius:20px}.cex-ach-hero,.cex-ach-card{padding:16px}.cex-ach-signature-controls{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cex-ach-wrap *,.cex-ach-wrap *::before,.cex-ach-wrap *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

@keyframes cexAchDrift{0%{transform:translateX(-5%) scaleY(1)}50%{transform:translateX(5%) scaleY(1.08)}100%{transform:translateX(-5%) scaleY(1)}}
@keyframes cexAchPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.88)}}
@keyframes cexAchShimmer{0%{transform:translateX(-105%)}34%{transform:translateX(205%)}100%{transform:translateX(205%)}}