:root{
  --navy:#071b2e;
  --navy-mid:#0a2843;
  --navy-light:#123b5d;
  --gold:#c79238;
  --gold-light:#e0b65d;
  --gold-bright:#e7bf6b;
  --white:#f8f5ef;
  --muted:#a8bac8;
  --border:rgba(205,147,54,.92);
}

*{box-sizing:border-box}
html{background:#050d15}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#050d15;
  color:var(--white);
}
a{color:inherit}

.connect-page{
  min-height:100vh;
  padding:24px 14px 50px;
  background:
    radial-gradient(circle at 50% 7%,rgba(201,150,60,.09),transparent 25%),
    linear-gradient(180deg,#051423 0%,#071b2e 52%,#030b12 100%);
}

.connect-shell{
  width:min(590px,100%);
  margin:0 auto;
}

.business-card{
  border:1px solid rgba(209,155,67,.44);
  border-radius:27px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 22%,rgba(22,70,105,.26),transparent 38%),
    linear-gradient(180deg,#061a2c 0%,#08223a 52%,#041421 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.44);
}

.brand-area{
  padding:38px 30px 25px;
  text-align:center;
}
.brand-area a{
  display:inline-block;
}
.brand-logo{
  display:block;
  width:min(430px,88%);
  margin:0 auto;
  filter:drop-shadow(0 5px 15px rgba(0,0,0,.38));
}
.brand-rule,.tagline-rule,.footer-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:20px auto 0;
  width:min(470px,88%);
}
.brand-rule span,.tagline-rule span,.footer-rule span{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold));
}
.brand-rule span:last-child,.tagline-rule span:last-child,.footer-rule span:last-child{
  background:linear-gradient(90deg,var(--gold),var(--gold),transparent);
}
.brand-rule i,.tagline-rule i,.footer-rule i{
  display:block;
  width:13px;
  height:13px;
  margin:0 10px;
  background:var(--gold-light);
  transform:rotate(45deg);
  border-radius:1px;
}

/* Tagline skyline panel */
.tagline-panel{
  position:relative;
  margin:0 22px 28px;
  min-height:390px;
  overflow:hidden;
  border:1px solid rgba(205,147,54,.72);
  border-radius:20px;
  background:url("/assets/hero-skyline.jpg") center 55%/cover no-repeat;
}
.tagline-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 37% 25%,rgba(25,67,101,.32),transparent 28%),
    linear-gradient(180deg,rgba(4,19,33,.69) 0%,rgba(5,24,41,.48) 42%,rgba(4,20,35,.14) 69%,rgba(4,18,31,.12) 100%);
}
.tagline-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:52px 26px 220px;
}
.tagline-rule{
  width:min(340px,78%);
  margin:0 auto 34px;
}
.tagline-rule.lower{
  margin:25px auto 19px;
}
.tagline-rule i{
  width:10px;
  height:10px;
}
.tagline-content h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:clamp(31px,6.2vw,48px);
  line-height:1.13;
  letter-spacing:-.025em;
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.42);
}
.tagline-content h1 em{
  color:#d79a3b;
  font-style:normal;
}
.service-line{
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 12px;
  color:#f2f4f5;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
}
.service-line b{
  color:var(--gold);
  font-size:13px;
}

/* Buttons */
.action-stack{
  display:grid;
  gap:10px;
  padding:0 28px 11px;
}
.contact-button{
  min-height:62px;
  display:grid;
  grid-template-columns:48px 1fr 25px;
  align-items:center;
  gap:8px;
  padding:8px 18px 8px 14px;
  border-radius:12px;
  text-decoration:none;
  transition:transform .13s ease,filter .13s ease,background .13s ease;
}
.contact-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}
.contact-button.gold{
  color:#071b2e;
  background:
    linear-gradient(100deg,#d9a846 0%,#e5bd69 48%,#c28c32 100%);
  border:1px solid #e5bb61;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 7px 20px rgba(0,0,0,.13);
}
.contact-button.outline{
  border:1px solid var(--border);
  color:#f8f4ed;
  background:linear-gradient(180deg,rgba(7,29,49,.78),rgba(5,23,40,.92));
}
.contact-button.save{
  margin-top:2px;
  border:1px solid rgba(200,147,58,.48);
  color:#fff;
  background:linear-gradient(180deg,rgba(7,28,48,.92),rgba(4,20,35,.98));
}
.button-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
}
.button-icon svg{
  width:27px;
  height:27px;
  fill:currentColor;
}
.gold-icon{
  color:#dca345;
}
.button-copy{
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(18px,4.2vw,25px);
  line-height:1.08;
  white-space:normal;
}
.outline .button-copy{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(15px,3.6vw,20px);
}
.outline .button-copy strong{
  color:#dca345;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  margin-right:5px;
  font-size:1.13em;
}
.save .button-copy{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(17px,3.8vw,22px);
}
.save small{
  color:#dca345;
  font-size:.78em;
}
.arrow{
  justify-self:end;
  font-family:Arial,sans-serif;
  font-size:42px;
  line-height:.7;
  font-weight:300;
}
.gold-text{
  color:#dca345;
}

/* Footer */
.card-footer{
  padding:6px 28px 28px;
  text-align:center;
}
.footer-rule{
  margin:8px auto 20px;
}
.card-footer p{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  color:#dca345;
  font-size:14px;
}
.card-footer p b{
  padding:0 9px;
  font-weight:400;
}

/* QR displayed below the card, not part of the card composition */
.qr-share{
  text-align:center;
  margin:22px auto 0;
}
.qr-share img{
  display:block;
  width:126px;
  margin:0 auto;
  padding:7px;
  border-radius:12px;
  background:#fff;
}
.qr-share p{
  margin:8px 0 0;
  color:#8198aa;
  font-size:11px;
}

@media(max-width:520px){
  .connect-page{
    padding:0;
    background:#061522;
  }
  .connect-shell{
    width:100%;
  }
  .business-card{
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .brand-area{
    padding:31px 20px 22px;
  }
  .brand-logo{
    width:min(390px,91%);
  }
  .tagline-panel{
    margin-left:14px;
    margin-right:14px;
    min-height:370px;
  }
  .tagline-content{
    padding:47px 15px 215px;
  }
  .service-line{
    gap:6px 8px;
    font-size:9.6px;
    letter-spacing:.08em;
  }
  .action-stack{
    padding-left:18px;
    padding-right:18px;
  }
  .contact-button{
    min-height:59px;
    padding-left:10px;
    padding-right:12px;
  }
  .card-footer{
    padding-left:18px;
    padding-right:18px;
  }
  .card-footer p{
    font-size:12.5px;
  }
  .qr-share{
    padding-bottom:30px;
  }
}