@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
:root{
  --theme: #f58634; /* user requested theme color */
  --accent-start: #252AFF;
  --accent-end: #25FFED;
}
*{
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
html,body{
  height:100%;
  margin:0;
  padding:0;
  font-size:16px;
  background:#0f0f12;
  color:#fff;
}
.container{
  /* Try dynamic/small viewport units first (svh/dvh) for iOS Safari, then fall back to classic 100vh */
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  width:100%;
  /* using the Unsplash image you requested (direct images.unsplash.com link) */
  background-image: url("https://images.unsplash.com/photo-1717386255773-a456c611dc4e?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.1.0");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.wrapper{
  width:100%;
  height:100%;
  background: linear-gradient(-55deg, transparent 25%, #16181E 25%, #16181E 75%, transparent 75%, transparent 100%);
  transition: all 0.5s cubic-bezier(0.67, 0, 0.3, 1) 0s;
  display:flex;
  justify-content:center;
  align-items:center; /* center vertically on all devices */
  text-align:center;
  /* Respect iPhone notch/safe-area (iPhone 14 Pro etc.) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.content{
  padding:1.25rem 1.5rem;
  color:rgba(255,255,255,1);
  max-width:720px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  text-align:center;
}
.content h1{
  font-size:3rem;
  margin:0 0 0.5rem 0;
}
.content p{
  font-size:1.1rem;
  margin:0 0 1rem 0;
  line-height:1.5;
  opacity:0.95;
}
.content a{
  color:rgba(255,255,255,1);
  display:inline-block;
  padding:0.7rem 1.25rem;
  overflow:hidden;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.btn1{
  border:1px solid rgba(255,255,255,1);
  transition:all .2s ease-in-out;
}
.btn1:hover{
  background:rgba(255,255,255,1);
  color:#111;
}
.btn2{
  margin-left:1rem;
  background: linear-gradient(90deg, var(--theme) 0%, #ffb36a 100%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: .2s ease-in-out;
  border-radius:6px;
  -webkit-border-radius:6px;
  /* ensure border-image respects rounding */
  overflow:visible;
}
.btn2:hover{
  background: none;
  border-image: linear-gradient(to bottom right, var(--theme) 0%, #ffb36a 100%);
  border-image-slice: 1;
  border-width: 1px;
  border-style: solid;
  transition: .2s ease-in-out;
  border-radius:6px;
}
.btn2:focus{
  outline:3px solid rgba(245,134,52,0.25);
  outline-offset:3px;
}

@media screen and (max-width: 355px){
  /* keep content centered on very small screens */
  .content{padding:1rem 1.1rem;text-align:center;width:100%}
  .content h1{font-size:2rem}
  .content p{font-size:1rem}
  .btn2{display:block;width:100%;box-sizing:border-box;padding:0.85rem 1rem;margin-left:0;margin-top:0.75rem;text-align:center}
}

@media screen and (min-width: 356px) and (max-width: 650px){
  /* keep content centered on small/medium screens */
  .content{padding:1rem 1.2rem;text-align:center;width:100%}
  .content h1{font-size:2.6rem}
  .content p{font-size:1rem}
  .btn2{display:inline-block;padding:0.75rem 1rem;margin-left:0.5rem}
}

/* center content vertically on larger screens */
@media screen and (min-width: 651px){
  .wrapper{align-items:center;text-align:center;padding-top:0}
  .content{padding:1.25rem 1.5rem}
  .content h1{font-size:3rem}
  .content{text-align:center}
}

/* Small accessibility improvements */
a:focus{outline:none}

/* Skip link for keyboard users */
.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  position:static;
  left:auto;
  width:auto;
  height:auto;
  padding:.5rem 1rem;
  background:#111;
  color:#fff;
  z-index:9999;
}

@media (prefers-reduced-motion: reduce){
  .wrapper{transition:none}
  .content{transition:none}
}