@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --yellow:#ffb72b;
  --yellow-light:#ffd83d;
  --orange:#efa31d;
  --graphite:#4d5052;
  --muted:#777b7d;
  --line:#dedfdd;
  --bg:#f2f2f0;
  --dark:#303436;
  --card:#fff;
  --radius:26px;
  --shadow:0 18px 45px rgba(45,48,50,.10),0 3px 10px rgba(45,48,50,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  font-family:Inter,Arial,sans-serif;
  color:var(--graphite);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,216,61,.12),transparent 26%),
    radial-gradient(circle at 90% 80%,rgba(90,94,96,.08),transparent 28%),
    linear-gradient(145deg,#fafaf9 0%,#eeeeec 48%,#fafaf9 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:-8%;
  z-index:-1;
  pointer-events:none;
  opacity:.035;
  background:url("larbos-icon.png") no-repeat 112% 7%/620px auto;
  filter:grayscale(1);
}

.page{
  width:min(760px,100%);
  margin:auto;
  padding:25px 15px 35px;
}

.header{
  text-align:center;
  padding:5px 8px 22px;
}

.logo{
  width:min(310px,78%);
  display:block;
  margin:0 auto 25px;
}

.tagline{
  margin:0;
  font-size:clamp(28px,5.8vw,42px);
  line-height:1.12;
  letter-spacing:-1.5px;
  font-weight:800;
}

.tagline span{color:var(--orange)}

.pillars{
  margin:13px 0 17px;
  color:var(--muted);
  font-size:13px;
}

.pillars b{
  color:var(--orange);
  padding:0 8px;
}

.socials{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.social{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border:1px solid #ddd;
  border-radius:50%;
  color:var(--graphite);
  background:rgba(255,255,255,.78);
  box-shadow:0 7px 17px rgba(45,48,50,.08);
  transition:.25s ease;
}

.social:hover{
  transform:translateY(-3px);
  color:#d99a16;
  border-color:var(--yellow);
}

.social svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.links{
  display:grid;
  gap:17px;
}

.card{
  min-height:184px;
  position:relative;
  overflow:visible;
  display:block;
  border:1px solid rgba(70,73,75,.07);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  color:inherit;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 25px 55px rgba(45,48,50,.15);
}

.card::before{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  top:18px;
  bottom:18px;
  width:5px;
  border-radius:0 5px 5px 0;
  background:linear-gradient(180deg,var(--yellow-light),var(--orange));
}

.card.dark{
  color:#fff;
  background:linear-gradient(145deg,#383c3e,#292c2e);
}

.card-content{
  min-height:184px;
  padding:28px 25px 28px 34%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:4;
}

.card-content-left{
  min-height:184px;
  padding:28px 25px 28px 5%;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:4;
}

.card h2{
  margin:0 0 7px;
  font-size:25px;
  letter-spacing:-.6px;
}

.card .url{
  margin:0 0 5px;
  color:#ec9f19;
  font-size:16px;
  font-weight:700;
}

.card .desc{
  margin:0;
  max-width:310px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.card.dark .desc{color:#c9cbcc}

.arrow{
  position:absolute;
  right:18px;
  bottom:18px;
  width:41px;
  height:41px;
  display:grid;
  place-items:center;
  border:1px solid rgba(75,78,80,.18);
  border-radius:50%;
  color:var(--graphite);
  background:#fff;
  font-size:21px;
}

.arrow-left{
  position:absolute;
  left:35px;
  bottom:18px;
  width:41px;
  height:41px;
  display:grid;
  place-items:center;
  border:1px solid rgba(75,78,80,.18);
  border-radius:50%;
  color:var(--graphite);
  background:#fff;
  font-size:21px;
}

.card.dark .arrow{
  color:#fff;
  background:transparent;
  border-color:#aaa;
}

/* Mockups are now real image assets and deliberately overflow the card. */
.mockup{
  position:absolute;
  left:-24px;
  top:50%;
  width:43%;
  height:auto;
  z-index:3;
  transform:translateY(-50%);
  pointer-events:none;
  object-fit:contain;
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.18));
}

.mockup.site{
  width:30%;
  left:20px;
  transform:translateY(-50%) rotate(-3deg);
}

.mockup.services{
  width:52%;
  left:50%;
  transform:translateY(-50%);
}

.mockup.about{
  width:38%;
  left:-18px;
  transform:translateY(-50%) rotate(-5deg);
}

.mockup.portfolio{
  width:51%;
  left: 47%;
  transform:translateY(-50%) rotate(-3deg);
}

.mockup.contact{
  width:32%;
  left:65%;
  transform:translateY(-50%) rotate(-5deg);
}

.mockup.whats{
  width:29%;
  left:10px;
  transform:translateY(-50%) rotate(-5deg);
}

.footer{
  margin-top:30px;
  padding:27px 18px;
  border-radius:25px;
  color:#4d5052;
  text-align:center;

}

.footer strong{
  font-size:18px;
  line-height:1.3;
}

.footer strong span{color:var(--yellow)}

.footer small{
  display:block;
  margin-top:10px;
  color:#adb0b1;
}

@media (max-width:620px){
  .page{padding:20px 12px 25px}
  .logo{width:245px;margin-bottom:21px}
  .tagline{font-size:27px}
  .pillars{font-size:11px}
  .social{width:41px;height:41px}
  .links{gap:15px}
  .card,.card-content{min-height:165px}
  .card-content{padding:23px 19px 23px 35%}
  .card h2{font-size:21px}
  .card .url{font-size:14px}
  .card .desc{font-size:11.5px}
  .arrow{width:37px;height:37px;right:15px;bottom:15px}
  .mockup{left:-18px}
  .mockup.site{width:43%;left:-16px}
  .mockup.services{width:54%;left:-28px}
  .mockup.about{width:45%;left:-15px}
  .mockup.portfolio{width:53%;left:-24px}
}

@media (max-width:390px){
  .card-content{padding-left:37%}
  .mockup.site{width:45%}
  .mockup.services{width:57%}
  .mockup.portfolio{width:56%}
}