:root{
  --gray-25:#f8fafc;
  --gray-50:#f3f4f6;
  --gray-100:#e5e7eb;
  --gray-200:#e2e8f0;
  --gray-500:#6b7280;
  --gray-700:#374151;
  --text:#374151;
  --muted:#6b7280;
  --surface:#ffffff;

  --accent:#79539e;    /* Elephas purple accent */
  --accent-2:#6e3d9d;  /* deeper shade for gradient */
  --accent-3:#676396;  /* lighter accent */

  --radius:22px;
  --shadow:0 18px 36px rgba(2,6,23,.08);
  --maxw:720px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(180deg, var(--gray-50), var(--gray-25));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.55;
  overflow-x:hidden;
}

/* Decorative background shapes */
.bg{position:fixed; inset:0; z-index:-2; pointer-events:none}
.shape{position:absolute; border-radius:28px}
.s1{top:-80px; right:-140px; width:560px; height:300px;
    background:linear-gradient(180deg, var(--accent), var(--accent-2));
    clip-path:polygon(16% 0,100% 0,100% 78%,86% 100%,0 100%,0 42%);
    box-shadow:0 30px 80px rgba(124,58,237,.25);}
.s2{bottom:-90px; left:-120px; width:520px; height:220px;
    background:linear-gradient(180deg, #8f93b8, #8f93b8);
    clip-path:polygon(0 0, 84% 0, 100% 36%, 100% 100%, 0 100%);
    box-shadow:0 30px 80px rgba(30,41,59,.15);}
.pattern{position:absolute; inset:0;
         background:
           repeating-linear-gradient(135deg, rgba(15,23,42,.06) 0 2px, transparent 2px 12px),
           radial-gradient(900px 400px at 110% -10%, rgba(124,58,237,.10) 0%, transparent 60%);
         opacity:.6}

/* White wrapper card */
.wrap{
  position:relative;
  z-index:1; /* ensure on top of background shapes */ 
  max-width:var(--maxw);
  margin:36px auto 46px;
  padding:28px 18px 44px;
  background:var(--surface);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Brand header */
.brand{display:flex; justify-content:center; align-items:center; gap:16px; margin:2px 0 6px}
.logo{display:block; height:auto; filter:drop-shadow(0 6px 18px rgba(2,6,23,.08))}
.logo-horizontal{height:64px}
.logo-stacked{height:86px; display:none}
@media (max-width:740px){ .logo-horizontal{display:none} .logo-stacked{display:block} }

/* Hero */
.hero{text-align:center; margin:8px 0 10px}
.badge{display:inline-block; padding:6px 10px; border:1px solid var(--gray-200); border-radius:999px; background:#fff; color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase}
.hero h1{font-size: clamp(24px, 4vw, 34px); margin:10px 0 8px; max-width:96%}
.tagline{font-size: clamp(16px, 3vw, 20px); font-weight:800; color:var(--gray-700); margin:20px 0 10px}
.lede{color:var(--muted); margin:0 auto 10px; max-width:62ch}

/* Contact card (no masks; fully compatible) */
.contact{display:grid; place-items:center; margin-top:30px}
.card{
  width:100%;
  border:1px solid transparent;
  border-radius:20px;
  padding:18px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(180deg, rgba(124,58,237,.22), rgba(124,58,237,0)) border-box;
  box-shadow:var(--shadow);
}
.card h2{margin:0 0 6px}
.muted{color:var(--muted)}

/* Form */
form{display:grid; gap:12px; margin-top:8px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){ .row{ grid-template-columns:1fr } }
label{font-size:14px; color:#4b5563}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--gray-100);
  background:#fff; color:var(--text); font:inherit; outline:none;
}
input:focus, textarea:focus{ border-color: var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.25) }
textarea{ min-height:120px; resize:vertical }

/* CTA button */
.btn{
  appearance:none; border:0; cursor:pointer; align-self:start;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:800; padding:12px 16px; border-radius:12px;
  box-shadow: 0 5px 0 rgba(91,33,182,.22), 0 18px 24px rgba(91,33,182,.22);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 0 rgba(91,33,182,.22), 0 14px 20px rgba(91,33,182,.22) }
.btn:active{ transform: translateY(0); box-shadow: 0 8px 0 rgba(91,33,182,.22), 0 10px 14px rgba(91,33,182,.22) }
.btn:disabled{ opacity:.7; cursor:not-allowed }

.status{ margin-top:10px; font-size:16px; min-height:1.2em; text-align:center; }
.status.ok{ color:#3f8d5c }
.status.err{ color:#ef4444 }

/* Footer */
.site-footer{ margin-top:20px }
.footer-inner{ text-align:center; color:var(--muted); padding:6px 0 }
.hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden }