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

:root{
  --bg:#151515;
  --panel:#1c1c1c;
  --text:#f3f3ee;
  --muted:#aeaeaa;
  --line:#373735;
  --orange:#ff6335;
  --orange-deep:#c8431f;
  --heading:'Space Grotesk',Arial,sans-serif;
  --body:'DM Sans',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.6;
}
a{color:inherit}
a,button,input{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* Narrowed 40% from the previous 58% (per explicit request) — closer to how
   little horizontal room Cloudflare's actual form card takes up. */
.split{display:grid;grid-template-columns:minmax(420px,35%) 1fr;min-height:100vh}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ── Left: auth panel ───────────────────────────────────────────────── */
.auth-side{display:flex;flex-direction:column;padding:44px clamp(28px,5vw,72px);gap:40px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;width:fit-content}
.brand img{height:28px;display:block}
.brand-name{font-family:var(--heading);font-size:16px;font-weight:700;letter-spacing:-.3px}
.brand-name span{color:var(--orange)}

/* ── Sign-up: formulário sozinho, sem a divisão de colunas do login (mesmo
   padrão de dash.cloudflare.com/sign-up — só o card centralizado, sem o
   painel de marca ao lado). ─────────────────────────────────────────── */
.standalone-brand{position:absolute;top:32px;left:clamp(20px,4vw,56px)}
.standalone-wrap{min-height:100vh;display:grid;place-items:center;padding:96px 24px 40px}
.standalone-wrap .auth-card{max-width:400px}

.auth-card{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:400px;margin-inline:auto;width:100%}
.auth-card h1{font-family:var(--heading);font-size:26px;letter-spacing:-.6px;margin:0 0 24px;text-align:center}

.social{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 16px;border-radius:4px;border:1px solid var(--line);
  background:#f3f3ee;color:#151515;font-weight:700;font-size:14px;cursor:pointer;
  text-decoration:none;transition:background .15s,transform .15s;
}
.social-btn:hover{background:#fff;transform:translateY(-1px)}
.social-btn svg{flex-shrink:0}

.divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;letter-spacing:.6px;margin:4px 0 22px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:#d8d8d2}
.field input{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:4px;
  background:transparent;color:var(--text);color-scheme:dark;font-size:14px;
}
.field input:focus{border-color:var(--orange)}

.pw-strength{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.pw-bar{display:flex;gap:4px}
.pw-bar span{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .2s ease}
.pw-bar span.filled{background:var(--orange)}
.pw-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pw-rules li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);transition:color .2s ease}
.pw-rules li svg{flex-shrink:0;color:inherit}
.pw-rules li.met{color:var(--orange)}

#turnstileBox{display:flex;justify-content:center}

.code-inputs{display:flex;gap:8px;justify-content:center;margin-bottom:4px}
.code-input{
  width:40px;height:52px;text-align:center;font-size:20px;font-weight:700;
  border:1px solid var(--line);border-radius:4px;background:transparent;
  color:var(--text);color-scheme:dark;padding:0;
}
.code-input:focus{border-color:var(--orange)}

.legal-check{
  display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;
  color:#9d9d97;cursor:pointer;
}
.legal-check input{margin:2px 0 0;width:15px;height:15px;flex-shrink:0;accent-color:var(--orange);cursor:pointer}
.legal-check a{color:#d8d8d2;text-decoration:underline}
.legal-check a:hover{color:var(--orange)}

.submit-btn{
  margin-top:6px;padding:13px 18px;border:0;border-radius:4px;background:var(--orange);
  color:#151515;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,transform .15s;
}
.submit-btn:hover{background:#ff7a54;transform:translateY(-1px)}
.submit-btn:disabled{opacity:.55;cursor:default;transform:none}

.form-msg{font-size:13px;font-weight:600;margin:0;min-height:1em;text-align:center}
.form-msg.error{color:var(--orange)}
.form-msg.ok{color:#7fd88f}

.auth-links{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center}
.auth-links a{color:var(--orange);font-weight:600;text-decoration:none}
.auth-links a:hover{text-decoration:underline}
.form-hint{font-size:13px;color:var(--muted);margin:-4px 0 4px;line-height:1.5}

.legal{font-size:11px;color:#6d6d68;text-align:center;line-height:1.6}
.legal a{color:#9d9d97;text-decoration:underline}

/* ── Right: animated brand panel ────────────────────────────────────── */
.brand-side{
  position:relative;overflow:hidden;background:#ffffff;
  display:flex;flex-direction:column;justify-content:center;padding:44px clamp(28px,5vw,72px);
  color:#151515;
}
@media (max-width:900px){.brand-side{display:none}}
.brand-side::before{
  content:'';position:absolute;inset:-20%;
  background-image:repeating-linear-gradient(-38deg,rgba(21,21,21,.06) 0 2px,transparent 2px 34px);
  animation:hatch-drift 22s linear infinite;
}
@keyframes hatch-drift{from{transform:translate(0,0)}to{transform:translate(120px,80px)}}

/* Globe: a wireframe "network planet" standing in for a literal rotating
   3D globe (no WebGL/3D-lib budget here) — a static sphere silhouette
   (outline + latitude bands) anchors the shape, meridian ellipses pulse
   their rx between full-width and a sliver on staggered timers (the
   standard flat-CSS trick for a "rotating wireframe sphere" illusion),
   the whole meridian+node layer drifts in a slow real rotation on top of
   that, and node dots + connecting arcs pulse/flow to read as "products
   connecting" — echoing the pitch copy next to it. */
.globe{position:absolute;right:-6%;bottom:-10%;width:min(62vh,680px);height:auto;opacity:.95;pointer-events:none}
.globe-outline{fill:none;stroke:rgba(21,21,21,.3);stroke-width:1.5}
.globe-lat{fill:none;stroke:rgba(21,21,21,.16);stroke-width:1.1}
.globe-spin-group{transform-origin:300px 300px;animation:globe-drift 100s linear infinite}
.globe-mer{fill:none;stroke:rgba(21,21,21,.22);stroke-width:1.1;animation:globe-meridian 7.5s ease-in-out infinite}
.globe-mer:nth-of-type(2){animation-delay:-2.5s}
.globe-mer:nth-of-type(3){animation-delay:-5s}
@keyframes globe-drift{to{transform:rotate(360deg)}}
@keyframes globe-meridian{0%,100%{rx:220}50%{rx:8}}
.globe-node{fill:#151515;animation:globe-node-pulse 2.6s ease-in-out infinite}
.globe-node:nth-of-type(2){animation-delay:.5s}
.globe-node:nth-of-type(3){animation-delay:1s}
.globe-node:nth-of-type(4){animation-delay:1.5s}
.globe-node:nth-of-type(5){animation-delay:2s}
.globe-node:nth-of-type(6){animation-delay:2.5s}
@keyframes globe-node-pulse{0%,100%{opacity:.3;r:2.6px}50%{opacity:1;r:4.6px}}
.globe-arc{fill:none;stroke:rgba(21,21,21,.4);stroke-width:1.3;stroke-dasharray:5 9;animation:globe-arc-flow 3.2s linear infinite}
.globe-arc:nth-of-type(2){animation-delay:-1s}
.globe-arc:nth-of-type(3){animation-delay:-2s}
@keyframes globe-arc-flow{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){
  .brand-side::before,.globe-spin-group,.globe-mer,.globe-node,.globe-arc{animation:none}
}
.brand-side .pitch{position:relative;max-width:460px}
.pitch .eyebrow{font-family:var(--heading);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin:0 0 18px}
.pitch h2{font-family:var(--heading);font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-1.2px;margin:0 0 20px}
.pitch h2 span{color:var(--orange)}
.pitch p{font-size:15px;line-height:1.6;max-width:400px;color:rgba(21,21,21,.75);margin:0}

[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ícones Lucide inline e separador neutro (sem símbolos de texto). */
.lucide{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none}
b.sep{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);font-size:0;vertical-align:middle}
summary{list-style:none}summary::-webkit-details-marker{display:none}