/* Get Started — Contact styles */

:root{
  --bg:#0c0c0e;
  --panel: rgba(255,255,255,0.03);
  --panel-border: rgba(255,255,255,0.06);
  --text:#ffffff;
  --muted: rgba(255,255,255,0.72);
  --accent:#c4ff0e;
  --accent-2:#9cff16;
  --radius:12px;
  --container-width:1200px;
  --gap:2rem;
  --transition:180ms ease;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:"Inter",system-ui,Roboto,Arial,sans-serif;line-height:1.45}

/* Container */
.container{max-width:var(--container-width);margin:0 auto;padding:0 1rem}

/* Contact Section */
.contact-section{padding:3.25rem 0}
.contact-header{max-width:820px;margin:0 0 1.25rem}
.contact-header h1{font-size:2rem;line-height:1.05;margin-bottom:.25rem}
.contact-header p{color:var(--muted);font-size:.98rem;margin:0}

/* Wrapper layout */
.contact-wrapper{display:grid;grid-template-columns:1fr 360px;gap:var(--gap);align-items:start}

/* Form side */
.contact-form-side .form-container{
  background:linear-gradient(180deg,var(--panel),transparent);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:1.75rem;
  backdrop-filter:blur(6px);
}
.form-container h2{color:var(--accent);font-size:1.05rem;margin:0 0 .5rem;font-weight:700}
.form-container p{color:var(--muted);margin:0 0 1.1rem}

/* Form elements */
.contact-form{display:block}
.form-group{margin-bottom:1rem}
.form-group label{display:block;margin-bottom:.45rem;font-weight:600;color:var(--text);font-size:.95rem}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group textarea,
.contact-form select{
  width:100%;
  padding:.78rem 1rem;
  border-radius:10px;
  border:1px solid var(--panel-border);
  background:transparent;
  color:var(--text);
  font-size:.95rem;
  transition:box-shadow var(--transition),border-color var(--transition);
}
.form-group textarea{min-height:120px;resize:vertical}
.form-group input:focus, .form-group textarea:focus, .contact-form select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 10px 30px rgba(156,255,22,0.06);
}

/* Checkbox group */
.checkbox-group{display:flex;align-items:center;gap:.5rem}
.checkbox-group input[type="checkbox"]{width:16px;height:16px}

/* Select arrow */
.select-wrapper{position:relative}
.select-wrapper select{appearance:none;padding-right:3rem}
.select-arrow{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--muted);width:18px;height:18px;display:flex;align-items:center;justify-content:center
}

/* Submit */
.submit-btn{
  display:inline-block;width:100%;padding:.9rem;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0c0c0e;font-weight:800;
  cursor:pointer;font-size:1rem;transition:transform var(--transition),filter var(--transition);
}
.submit-btn:hover{transform:translateY(-3px);filter:brightness(1.02)}

/* Info side */
.contact-info-side{display:flex;flex-direction:column;gap:1rem}
.info-card{
  background:linear-gradient(180deg,var(--panel),transparent);
  border:1px solid var(--panel-border);
  border-radius:12px;padding:1rem;
}
.info-card h2{margin:0 0 .45rem;color:var(--accent);font-size:1rem}
.info-content p{margin:0;color:var(--muted);font-size:.95rem}
.info-content a{color:var(--text);text-decoration:none}
.info-content a:hover{color:var(--accent)}

/* Talk first card */
.talk-first{background:linear-gradient(180deg, rgba(196,255,14,0.03), transparent);border:1px solid rgba(196,255,14,0.08);padding:1rem;border-radius:12px}
.talk-first h2{margin:0 0 .5rem;color:var(--accent)}
.talk-options{display:flex;gap:.6rem;margin-top:.6rem}
.ai-chat-btn, .book-call-btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-radius:10px;border:none;cursor:pointer;
  background:transparent;color:var(--text);transition:all var(--transition);
}
.ai-chat-btn svg, .book-call-btn svg{width:18px;height:18px;flex:0 0 18px}
.ai-chat-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0c0c0e;font-weight:700}
.book-call-btn{background:transparent;border:1px solid var(--panel-border);font-weight:700}
.ai-chat-btn:hover, .book-call-btn:hover{transform:translateY(-3px)}

/* Responsive */
@media (max-width:980px){
  .contact-wrapper{grid-template-columns:1fr;gap:1rem}
  .contact-info-side{order:2}
  .contact-form-side{order:1}
  .contact-header h1{font-size:1.6rem}
}
@media (max-width:520px){
  .contact-header h1{font-size:1.25rem}
  .talk-options{flex-direction:column}
  .ai-chat-btn, .book-call-btn{width:100%;justify-content:center}
}

/* Small helpers */
.small{font-size:.9rem;color:var(--muted)}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:var(--text)}
.contact-section {
    position: relative;
    padding: 2rem 0;
}

.contact-header-image {
    position: absolute;
    top: -10px;
    right: -60px;
    width: 350px;
    height: auto;
    opacity: 0.8;
    z-index: 10;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-header {
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    .contact-header-image {
        width: 300px;
        top: 10px;
        right: 10px;
    }
}

@media screen and (max-width: 480px) {
    .contact-header-image {
        width: 200px;
        top: 25px;
        right: -30px;
    }
}