/* =========================================================
   SpeedoOne CRM — Get Started page
   ========================================================= */
:root{
  --brand:#1E72B8; --navy:#27568E;
  --ink:#111827; --ink-2:#4B5563; --ink-3:#6B7280;
  --border:#D6DEE8;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:#fff;color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.su-shell{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1.35fr) minmax(0,340px);min-height:100vh}

/* ---------- left panel ---------- */
.su-left{
  position:relative;color:#fff;padding:28px;display:flex;flex-direction:column;
  background:
    radial-gradient(340px 340px at 15% 12%,rgba(88,120,240,.25),transparent 65%),
    radial-gradient(420px 420px at 85% 88%,rgba(150,80,200,.22),transparent 65%),
    linear-gradient(160deg,#141034 0%,#1E1546 55%,#2A1454 100%);
}
.su-left::before{
  content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.5px);
  background-size:26px 26px;
}
.su-brand svg{width:44px;height:44px}
.su-left blockquote{position:relative;margin:auto 0;padding:0 6px}
.su-left blockquote p{font-size:1.06rem;line-height:1.75;text-align:center;color:#EDEAF8;font-weight:500}
.su-left footer{margin-top:22px;text-align:center}
.su-left footer b{display:block;color:#8FCBF2;font-size:.9rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.su-left footer span{font-size:.8rem;color:#B9AEE0}

/* ---------- center ---------- */
.su-main{padding:0 clamp(24px,4vw,64px) 50px;position:relative}
.su-top{
  display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:20px 0;font-size:.9rem;color:var(--ink-2);
}
.su-top a{color:#E42527;font-weight:800;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.su-top a:hover{text-decoration:underline}
.su-form-wrap{max-width:460px;margin:12px 0 0}
.su-lockup{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.su-lockup svg{width:40px;height:40px}
.su-lockup i{display:block;font-style:normal;font-size:.7rem;font-weight:700;color:var(--navy);line-height:1}
.su-lockup b{display:block;font-size:1.35rem;font-weight:850;color:var(--navy);letter-spacing:-.02em;line-height:1.05}
.su-form-wrap h1{margin:0 0 26px;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.02em}

form label{display:block;margin-bottom:16px;font-size:.9rem;font-weight:600;color:var(--ink)}
form input[type=text],form input[type=email],form input[type=password]{
  display:block;width:100%;margin-top:6px;padding:13px 14px;
  border:1px solid var(--border);border-radius:4px;background:#F3F8FD;
  font:inherit;font-size:.95rem;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
form input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(30,114,184,.12)}
.su-phone{display:flex;margin-top:6px;border:1px solid var(--border);border-radius:4px;background:#F3F8FD;overflow:hidden}
.su-phone span{padding:13px 16px;border-right:1px solid var(--border);color:var(--ink-2);font-weight:600;background:#EDF3FA}
.su-phone input{flex:1;border:0;background:transparent;padding:13px 14px;font:inherit;font-size:.95rem;outline:none;min-width:0}
.su-note{display:block;margin:-6px 0 14px;font-size:.78rem;color:var(--ink-2)}
.su-agree{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;font-weight:500;color:var(--ink)}
.su-agree input{margin-top:4px}
.su-agree a{color:var(--ink);font-weight:700}
.su-go{
  width:100%;margin-top:8px;padding:16px;border:0;border-radius:4px;cursor:pointer;
  background:#EF4444;color:#fff;font:inherit;font-size:1rem;font-weight:800;letter-spacing:.04em;
  transition:background .2s var(--ease);
}
.su-go:hover{background:#DC2626}
.su-or{
  display:flex;align-items:center;gap:14px;margin:24px 0 18px;
  font-size:.86rem;color:var(--ink-2);white-space:nowrap;
}
.su-or i{flex:1;height:1px;background:var(--border)}
.su-social{display:flex;gap:14px;flex-wrap:wrap}
.su-social a{
  display:inline-flex;align-items:center;text-decoration:none;border-radius:4px;overflow:hidden;
  font-size:.88rem;font-weight:650;color:#fff;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.su-social a:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(16,42,70,.16)}
.su-social b{display:grid;place-items:center;width:42px;align-self:stretch;background:#fff;font-weight:800}
.su-g{background:#4285F4}
.su-g b{color:#4285F4;border:1px solid #4285F4}
.su-g{padding-right:16px;gap:12px}
.su-in{background:#0A66C2;padding-right:16px;gap:12px}
.su-in b{color:#0A66C2;border:1px solid #0A66C2;font-style:italic}

/* ---------- right assistance ---------- */
.su-right{padding:120px 30px 30px}
.su-right h3{margin:0 0 10px;font-size:1.12rem;font-weight:800}
.su-right p{margin:0 0 8px;font-size:.9rem;color:var(--ink-2)}
.su-right p.mt{margin-top:18px}
.su-cline{
  display:flex;align-items:center;gap:9px;margin-bottom:6px;
  color:var(--ink);font-size:1rem;font-weight:750;text-decoration:none;
}
.su-cline:hover{color:var(--brand)}
.su-cline .ico{color:#D97706}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .su-shell{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
  .su-right{grid-column:2;padding:10px clamp(24px,4vw,64px) 40px}
}
@media (max-width:760px){
  .su-shell{grid-template-columns:1fr}
  .su-left{display:none}
  .su-right{grid-column:1;padding:10px 24px 40px}
}