:root{
  --ink:#0B0B0F;
  --muted:rgba(11,11,15,.62);
  --line:rgba(11,11,15,.14);
  --pink:#FF2DBF;
  --paper:#F6F6F8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:var(--paper);
}

/* Top bar */
.sp-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:rgba(246,246,248,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(11,11,15,.06);
}
.sp-brand{
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  letter-spacing:.18em;
  font-size:13px;
}
.sp-links{
  display:flex;
  gap:14px;
  margin-left:6px;
  flex:1;
}
.sp-links a{
  text-decoration:none;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sp-links a:hover{color:rgba(11,11,15,.9)}
.sp-back{
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sp-back:hover{opacity:.8}

/* Split layout */
.sp{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr 1fr;
  padding-top:64px;
}

.sp-left{
  position:relative;
  background:var(--pink);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sp-left__frame{
  width:min(520px, 86%);
  aspect-ratio: 4 / 5;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.sp-left__img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.35));
  transform: translateY(-2%);
}

.sp-right{
  background:var(--paper);
  display:flex;
  align-items:center;
}

.sp-right__inner{
  width:min(520px, 86%);
  margin:0 auto;
  padding:32px 0;
}

.sp-title{
  margin:0;
  font-size:44px;
  letter-spacing:-.02em;
  line-height:1.02;
}
.sp-sub{
  margin:14px 0 28px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}

/* Form */
.sp-form{display:flex; flex-direction:column; gap:18px;}
.sp-row{display:flex; flex-direction:column; gap:8px;}
.sp-row--area{gap:10px}

.sp-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,11,15,.7);
}

.sp-input{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:12px 0 10px;
  font-size:15px;
  outline:none;
}
.sp-input:focus{border-bottom-color:rgba(11,11,15,.45)}
.sp-select{padding:10px 0 12px}

.sp-area{
  resize:vertical;
  min-height:110px;
  padding-top:10px;
}

.sp-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
}

.sp-submit{
  appearance:none;
  border:1px solid rgba(11,11,15,.18);
  background:transparent;
  color:var(--ink);
  padding:12px 16px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.sp-submit:hover{
  transform:translateY(-1px);
  background:rgba(11,11,15,.04);
  border-color:rgba(11,11,15,.28);
}

.sp-hint{
  font-size:12px;
  color:var(--muted);
  min-height:16px;
}
.sp-hint[data-ok="0"]{color:rgba(190,0,0,.72)}
.sp-hint[data-ok="1"]{color:rgba(11,11,15,.62)}

/* Responsive */
@media (max-width: 900px){
  .sp{grid-template-columns: 1fr;}
  .sp-left{min-height:44vh;}
  .sp-right{min-height:56vh;}
  .sp-title{font-size:38px;}
}

@media (max-width: 520px){
  .sp-nav{padding:16px 16px;}
  .sp-links{display:none;}
  .sp{padding-top:60px;}
  .sp-right__inner{width:90%;}
  .sp-left__frame{width:88%;}
  .sp-title{font-size:34px;}
}

/* === HARD RESET / FULL BLEED FIX === */
* { box-sizing: border-box; }
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
}

body {
    background: #000;
}

header, nav {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    left: 0;
    right: 0;
}

.container, .wrapper, .layout {
    max-width: none !important;
    width: 100vw !important;
    margin: 0 !important;
    padding-left: 48px;
    padding-right: 48px;
}

main, .page, .start-project, .split {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* remove any accidental top gaps */
body > *:first-child {
    margin-top: 0 !important;
}