:root{
  --green:#27C97B;
}
*{box-sizing:border-box;font-family:'IBM Plex Sans',sans-serif;margin:0;padding:0}
body{background:#f4f6fb}
.grid{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.left{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;gap:1.2rem}
.logo-main{height:60px}
.left h1{font-size:2rem;font-weight:bold}
.left p{max-width:340px;line-height:1.6}

.right{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f4f6fb}
.card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 12px rgba(0,0,0,.1);width:100%;max-width:420px;text-align:center}
.field{position:relative;margin:.6rem 0}
.field input{width:100%;padding:.8rem 1rem;border-radius:8px;border:1px solid #ccc;font-size:15px}
.info{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--green);color:#fff;width:18px;height:18px;line-height:18px;border-radius:50%;font-size:11px;cursor:pointer;text-align:center;font-weight:bold}
.info:hover::after{content:attr(data-tip);position:absolute;right:110%;top:50%;transform:translateY(-50%);background:#000;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:10}
.btn-group{display:flex;gap:10px;margin:1rem 0}
button{flex:1;padding:.8rem;border:none;border-radius:8px;background:var(--green);color:#fff;font-weight:bold;cursor:pointer;transition:opacity .2s}
button[disabled]{opacity:.4;cursor:not-allowed}
.preview{margin-top:1.2rem;padding:1.2rem;border:1px solid #eee;border-radius:12px;text-align:left}
.logo-preview{height:20px;width:auto;margin-bottom:1rem}
.preview h3{font-family:'Playfair Display',serif;font-size:1.5rem;margin:0.2rem 0;}
.preview h4{font-size:1rem;margin-bottom:0.8rem;text-transform:uppercase}
.preview p{margin:0.35rem 0;font-size:0.98rem;line-height:1.4}
.green{color:var(--green)}
.no-link{text-decoration:none;color:inherit}

@media(max-width:992px){
 .grid{grid-template-columns:1fr}
 .right{padding:1rem}
 .card{margin-top:2rem}
 .preview{text-align:center}
}