:root{
  --bg:#f4faf7; --card:#fff; --text:#0f2a1c; --muted:#4c6b5a; --line:#e6efe9;
  --primary:#16a34a; --primary2:#22c55e;
  --shadow:0 14px 40px rgba(15,42,28,.10);
  --radius:18px;
}

html,body{
  height:100%;
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);

  background:
 
    url("../../img/bgggg.jpg") center/cover no-repeat fixed;
    
}

.page{
  min-height: 100dvh;       /* better on mobile too */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* or center, your choice */
  padding:16px;
  gap:14px;
  box-sizing:border-box;    /* IMPORTANT */
}

.card{
    margin-top:40px;
  width:min(720px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-header{
  padding:18px 18px 14px;
  background:linear-gradient(180deg,#fff,#fbfefc);
  border-bottom:1px solid var(--line);
}

.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{
  width:64px;height:64px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#eef8f1;display:grid;place-items:center;flex:0 0 auto;
}
.brand-video{width:100%;height:100%;object-fit:cover;display:block;}
.brand-text h1{margin:0;font-size:1.25rem;}
.brand-text p{margin:4px 0 0;color:var(--muted);font-size:.95rem;}

.header-note{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#f0fbf4;
  border:1px solid #d9f3e3;
  color:#25663f;
  font-size:.92rem;
}
.header-note.success{
  background:#ecfdf3;
  border-color:#c9f0da;
}

.card-body{padding:18px;}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}

label{font-weight:650;font-size:.92rem;}
input[type="text"],input[type="tel"],input[type="email"]{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fbfdfc;
  outline:none;
  font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus{border-color:rgba(34,197,94,.7);box-shadow:0 0 0 4px rgba(34,197,94,.15);}
input::placeholder{color:#92a79b;}

.section-title{margin:18px 0 10px;font-weight:750;font-size:1rem;}

.drop-area{
  display:flex;align-items:center;gap:12px;
  padding:14px;
  border-radius:14px;
  border:2px dashed rgba(22,163,74,.35);
  background:#fbfffd;
  cursor:pointer;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.drop-area:hover{transform:translateY(-1px);border-color:rgba(22,163,74,.6);box-shadow:0 10px 25px rgba(15,42,28,.08);}
.drop-area.highlight{border-color:rgba(22,163,74,.95);box-shadow:0 0 0 5px rgba(34,197,94,.14);}

.drop-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:#ecfdf3;border:1px solid #d9f3e3;font-size:18px;
}
.drop-title{font-weight:800;}
.drop-sub{margin-top:2px;color:var(--muted);font-size:.9rem;}

.file-name{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #d9f3e3;
  background:#f0fbf4;
  color:#25663f;
  font-weight:650;
  font-size:.95rem;
}
.file-name.error{border-color:#ffd1d1;background:#fff2f2;color:#a11b1b;}

.btn{
  width:100%;
  margin-top:14px;
  padding:12px 14px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(22,163,74,.18);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 16px 32px rgba(22,163,74,.22);}
.btn:active{transform:translateY(1px);}

.fineprint{margin:10px 0 0;color:var(--muted);font-size:.86rem;line-height:1.35;}
.footer{color:#6b8276;margin-top:auto; font-size:.9rem;text-align:center;}

@media (max-width: 640px){
  .grid{grid-template-columns:1fr;}
  .page{justify-content:flex-start;}
  .card-header,.card-body{padding:14px;}
  .drop-area{flex-direction:column;align-items:flex-start;}
}